Как повернуть фон

Как реализовать поворот background?

Сделал ромбы (просто повернул квадраты), нужно вставить в каждый ромб картинку, проблема в том, что она перевернута получается.

Как обратно повернуть картинку?

И как сделать, чтобы при ховере ромб наполовину закрашивался?

Вопрос задан более трёх лет назад
9733 просмотра

Комментировать
Решения вопроса 2

yurzui

Конечно очень ужасный код. И почему у вас для разных браузеров разные углы поворота. Так задумано?
Взял поворот для webkit. Вот ваши ромбы

Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать

glizer

Делаете внутри дополнительный div, в котором переворачиваете в обратную сторону, а нешнему присваиваете overflow:hidden. Закрашивание так же можно реализовать дополнительным дивом, который будет «выезжать» на половину

Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
Ответы на вопрос 2

kapuletti

Пример очень большой и долго в нем разбираться.

Смысл такой: сделать обертку. Поворачиваем обертку на +45 градусов, а содержимое на -45.

Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать

alexk111

Автор Ботодрома (автоматизация Telegram, VK и др.)

Сделайте блок с ромбами с помощью SVG. CSSом ставите фоновую картинку на ромбы. Поверх каждого ромба в SVG еще половинка ромба, которая прозрачна по умолчанию, и непрозрачна по ховеру.

Как применить трансформацию CSS3 к фоновым картинкам

Масштабирование, наклон и поворот любого элемента возможен с помощью свойства CSS3 transform . Оно поддерживается всеми современными браузерами (с префиксами) и допускает изящную деградацию, к примеру:

#myelement

Хорошая штука. Однако вращается элемент целиком — его содержимое, границы и фоновая картинка. Что делать, если вы желаете повернуть только фоновое изображение? Или чтобы фон остался на месте, а элемент поворачивался?

В настоящее время у W3C нет предложений по трансформации фонового изображения. Это было бы невероятно полезно, поэтому подозреваю, нечто появится в конце концов, но не поможет разработчикам, которые хотят использовать подобные эффекты сегодня.

К счастью, есть решение. В сущности, это хак, который добавляет фоновое изображение к псевдоэлементу :before или :after , а не к родительскому контейнеру. Псевдоэлемент может трансформироваться независимо.

Трансформация только фона

У контейнера может не быть никаких стилей, но необходимо задать position: relative , поскольку наш псевдоэлемент располагается внутри. Также установите overflow: hidden , в противном случае фон будет выходить за пределы контейнера.

#myelement

Теперь мы можем создать абсолютно позиционированный псевдоэлемент с трансформируемым фоном. Свойство z-index задаём как -1, это гарантирует что фон появится под содержимым контейнера.

#myelement:before

Обратите внимание, что вам, возможно, потребуется настроить ширину псевдоэлемента, его высоту и положение. К примеру, если вы используете повторяющееся изображение, область поворота должна быть больше самого контейнера, чтобы полностью вместить фон.

Фиксация фона у трансформируемых элементов

Любые трансформации родительского контейнера применяются и к псевдоэлементам. Так что нам надо отменить трансформацию, например, если контейнер поворачивается на 30 градусов, фон должен повернуться на -30 градусов, чтобы он оказался в фиксированном положении:

#myelement < position: relative; overflow: hidden; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); >#myelement:before

Опять же, необходимо настроить размер и положение чтобы фон адекватно вписывался в родительский контейнер.

Пожалуйста, посмотрите демонстрационную страницу для примера. Полный код хранится внутри HTML.

Эффект работает в IE9, Firefox, Chrome, Safari и Opera. IE8 не покажет никаких трансформаций, но фон появится.

IE6 и 7 не поддерживает псевдоэлементы, поэтому фон исчезнет. Однако, если вы хотите поддерживать эти браузеры, можно добавить фоновое изображение к контейнеру, а затем установить его как none с помощью современных селекторов или через условные комментарии.

Как реализовать поворот background?

Делал ромбы(просто повернул квадраты), а от нужно вставить в каждый ромб картинку, ток проблема в том что она перевернута получается . Подскажыте пожалуйста кто такое уже делал : Как обратно повернуть картинку ? И как сделать чтоб при на видении ховер закрашивал ромб (ток половину) ? Вот мой код :

@charset "utf-8"; html, body < width: 1920px; text-align: center; margin:0 auto; padding:0; >.top_baner < width: 100%; margin: 0 auto; padding: 0; background-image: url(../img/baner_top.png); padding: 155px; background-repeat: no-repeat; >.top_baner > .content_wrapper < margin: 0 auto; padding: 0; width: 1214px; >.top_baner > .content_wrapper > .top_line < width: inherit; background-image: url(../img/Top_logo.png); background-repeat: no-repeat; background-position: 0% 100%; margin: 0 auto; padding: 0; height: 81px; >.top_baner > .content_wrapper > .top_line > p < margin: 0 0 0 0; padding: 63px 0 0 42px; font-size: 14px; color: white; display: block; text-align: left; >.top_baner > .content_wrapper > h1 < margin: 207px 0 0 0; padding: 0 0 0 0; font-size: 48px; color: white; display: block; text-align: left; >.top_baner > .content_wrapper > h2 < margin: 50px 0 0 0; padding: 0 0 0 0; font-size: 16px; color: white; display: block; text-align: left; >.top_baner > .content_wrapper > hr < display: block; width: 20px; border: none; height: 1px; background: white; margin: 40px 0px auto; >.top_baner > .content_wrapper > a < text-decoration: none; color: white; padding: 0; width: 157px; height: 60px; display: block; font-size: 12px; line-height: 5.5; border-color: white; border-width: 2px; border-style: solid; margin: 40px 0 0 0; >.second_block < width:1920px; height:1200px; margin:0 auto; padding:0; background:#f6f6f6; >/*Second_block*/ .second_block > .content_wrapper < margin: 0 auto; padding: 0; width: 1214px; >.second_block > .left_block < float:left; width:441px; margin: 284px 0px 0px 0px; padding: 0 353px 0; text-align: left; padding-right: 0px; >.left_block > h1 < font-size:53px; margin:0 auto; padding:0; >.left_block > hr < display: block; width: 20px; border: none; height: 1px; background: #000000; margin: 16px 0 auto; >.left_block > h2 < font-size:18px; margin: 55px 0 0 auto; padding:0; >.right_block < float: right; width: 1126px; display: inline-block; -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(316deg); top: -597px; right: 26px; >.second_block > .right_block > .firsrt_bloks > li < list-style-type:none; margin: 0 0 auto; padding:0; >.second_block > .right_block > .sekond_block > li < list-style-type:none; margin: 0 0 auto; padding:0; >.second_block > .right_block > ul > li > a < width: 193px; height: 193px; padding:0; margin: 10px 0px 0 10px; background: #FFFFFF; display: block; float: left; >.firsrt_bloks <*/; /* padding-top: 112px; */ /* padding-bottom: 525px; */ clear: both; margin:0 auto; padding: 0 0 0 0; height: 206px; margin-right: 0; >.second_block < width: 1920px; height: 890px; margin: 0 auto; padding: 0; background: #f6f6f6; >.left_block > h1 < font-size: 53px; margin: 0 auto; padding: 0; >.second_block > .left_block > hr < display: block; width: 20px; border: none; height: 1px; background: #000000; margin: 16px 0 auto; >.second_block > .left_block > h2 < font-size: 18px; margin: 55px 0 0 auto; padding: 0; >.right_block < float: right; width: 1126px; display: inline-block; -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(316deg); top: -597px; right: 26px; >ul.firsrt_bloks < padding-bottom: 525px; padding-top: 112px; >.firsrt_bloks < clear: both; margin: 0 auto; padding: 0 0 0 0; height: 206px; margin-right: 0; >.right_block > .firsrt_bloks > li < list-style-type: none; margin: 0 0 auto; padding: 0; >.second_block > .right_block > ul > li > a < width: 193px; height: 193px; padding: 0; margin: 10px 0px 0 10px; background: #FFFFFF; display: block; float: left; >.second_block > .right_block > ul > li > a > img < -webkit-transform: rotate(406deg); display: block; float: left; margin-bottom\: 1; padding: 1; >a#id1 < >a#id2 < >a#id3 < >a#id4 < clear: left; margin-left: 213px; >a#id5 < >a#id6 < margin-left: 10px; >a#id7 < clear: left; margin-left: 621px; >a#id8 < margin-left: 10px; >.right_block > ul > li > a > p < margin: 42px 0 0 0; padding: 33px; -webkit-transform: rotate(404deg); width: 140px; clear: both; >.width_zone > img < margin-bottom: 0;padding-bottom: 0;margin: -59px 0 0 0;>.right_block > ul > li > a > p > img < margin: -22px 56px auto; padding: 0 0 0 0; float: left; >.right_block > .firsrt_bloks > li > a:hover < background: #28282e; color: white; >/*sirt_blocked*/ .third < margin: 0 auto; padding: 0 0 0 0; width: 1920px; height: 1200px; background: #28282e; >.width_zone < margin-bottom: 75px; width: 600px; height: 320px; background-repeat: no-repeat; >a.next_slayd_1, a.next_slayd_2, a.next_slayd_3 < background-repeat: no-repeat; width: 74px; height: 50px; float: left; >.slayder < float: right; width: 600px; height: 445px; >.togles < background-image: url(../img/icons.png); background-position: 50% 50%; width: 222px; height: 47px; margin-left: 186px; background-repeat: no-repeat; >.third > .content_wrapper < width:1214px; height:890px; margin: 0 auto; padding: 0 0 0 0; >.third > .content_wrapper > p < margin: 0 auto; padding-bottom:240px; >.left_block < float:left; width:441px; margin: 0px 0px 0px 0px; padding: 0 0 0 0; text-align: left; padding-right: 0px; >.third > .content_wrapper > .left_block > h1 < font-size: 53px; margin: 0 auto; padding: 0; color:#FFF; >.third > .content_wrapper > .left_block > hr < display: block; width: 20px; border: none; height: 1px; background: #FFF; margin: 16px 0 auto; >.third > .content_wrapper > .left_block > h2 < font-size: 18px; margin: 55px 0 0 auto; padding: 0; color:#FFF; >.third > .content_wrapper > .left_block > a < text-decoration: none; color: white; padding: 0; width: 157px; height: 60px; display: block; font-size: 12px; line-height: 5.5; border-color: white; border-width: 2px; border-style: solid; margin: 40px 0 0 0; text-align: center; >/*white_blog */ .white_blog < margin: 0 0 0 0; padding: 0 0 0 0; width:1920px; height:1200px; background:#FFF; >.content_wrapper < margin:0 auto; padding: 0 ; width: 1214px; >.white_blog > .content_wrapper > p < margin: 0 auto; height: 120px; padding: 0 0 0 0; >.first_line > h1 < float:left; font-size: 53px; margin: 0 auto; padding: 0; color:#333333; >.first_line > hr < clear: both; float:left; display: block; width: 20px; border: none; height: 1px; background: #000; margin: 16px 0 auto; >.first_line > p < text-align: left; margin: 0 auto; padding: 24px 0 0 622px; width:406px; >.white_blog > .content_wrapper:last-child > p < margin: 0 auto; height: 115px; padding: 0 0 0 0; >/* tems */ .teams_block < margin: 0 auto; padding: 0 0 0 0; width:inherit; height: 891px; background:#f6f6f6; >.teams_block > .left_block < float: left; width: 441px; margin: 284px 0px 0px 0px; padding: 0 353px 0; text-align: left; padding-right: 0px; >.right_block > ul > li > a < width: 193px; height: 193px; padding: 0; margin: 10px 0px 0 10px; background: #FFFFFF; display: block; float: left; background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Steve_Jobs_Headshot_2010-CROP.jpg/250px-Steve_Jobs_Headshot_2010-CROP.jpg) >/*Table*/ table < width: 100%; background: white; color: #000; border-spacing: 1px;/* Расстояние между ячейками */ background: url(../img/Bacgraund_line.png);*/; background-position: 50% 99%; background-size: 100%; background-repeat: no-repeat; >tr:nth-child(2) > td < background: #fff; border-bottom: 1px solid; border-color: #e5e5e5; >tr:nth-child(1) > td < padding-bottom: 35px; >tr:nth-child(2) < >tr:nth-child(3) < >tr:nth-child(4) < >tr:nth-child(5) < >tr:nth-child(6) < >tr:nth-child(7) < height: 100px;color: white; >tr:nth-child(8) < height: 100px; color: white; >tr:nth-child(9) < >tr:nth-child(10) < >tr:nth-child(11) < >/*Gray_block*/ .Gray_block < width:1920px; height:1041px; background: #28282e; color: white; >.Gray_block > .content_wrapper < width:1214px; height:890px; margin: 0 auto; padding: 0 0 0 0; >.Gray_block > .content_wrapper > h1 < margin:0 auto; padding: 142px 0 0 0; font-size:39px; >.Gray_block > .content_wrapper > p < margin: 0 auto; padding: 65px 0 0 0; text-align:center; width:720px; height:77px; >.Gray_block > .content_wrapper > .slayder < padding-top: 55px; margin: 0 auto; float: none; width: 965; height: 458px; >.controlers < padding-top: 55px; >.controlers >.inputs:nth-child(1) < margin: 0 auto; >.inputs < margin-left: 42px;>tr:nth-child(3) > td < padding-top: 40px; >tr:nth-child(4) > td:nth-child(1) < padding-right: 607px; padding-bottom: 40px; background: #fff; padding-top: 20px; border-bottom: 1px solid; border-color: #e5e5e5; >tr:nth-child(5) > td < padding-top: 20px; >tr:nth-child(7) > td:nth-child(1) < padding-left: 19px;>tr:nth-child(6) > td < padding-top: 40px; padding-right: 607px; padding-bottom: 40px; >tr:nth-child(8) > td < /* padding-left: 56px; */ padding-right: 571px; padding-bottom: 80px; >table.tables_2 < margin-top: 40px; background: white; >.tables_2 > tbody > tr:nth-child(2) > td < padding-bottom: 65px; padding-right: 600px; >.tables_2 > tbody > tr:nth-child(3) > td < text-align: center; color: #ef443a; >.tables_2 > tbody > tr:nth-child(4) > td < background-color: antiquewhite; >.tables_2 > tbody > tr:nth-child(5) > td < background-color: antiquewhite; >.tables_2 > tbody > tr:nth-child(6) > td < background-color: antiquewhite; >tbody > td > tr <> tbody > tr > td < /* border-color: #e5e5e5; */ padding-left: 21px; >input[type="radio"]:checked < >/*red_line*/ .red_line < margin:0 auto; padding: 0 0 0 0; width:inherit; height:120px; text-align:center; color:#FFF; background-color:#ef4035; line-height: 7.5; font-size: 18px; >/* futter */ .futter < height: 150px; margin:0 auto; padding: 0 0 0 0; width: 1920px; background: #28282e; color:#727277; font-size:13px; >.futter > .content_wrapper > p < margin: 0 auto; padding: 67px 256px 0 0; float: left; >.futter > .content_wrapper > p:nth-child(4) < padding-left: 0; padding-right: 0; >.right_block > ul > li > a:nth-child(4) < clear: left; margin-left: 213px; >.right_block > .firsrt_bloks > li > a:nth-child(6) <> .right_block > .firsrt_bloks > li > a:nth-child(6) <> .right_block > .firsrt_bloks > li > a.id4 < clear: left; margin-left: 213px; >.third > .right_block > ul > li > #id7 < clear: left; margin-left: 621px; >.thumb < background-image:url(../img/charle_igener.png); position: relative; overflow: hidden; >.thumb:after < content: ""; width: 250px; height: 250px; background: inherit; transform: rotate(-45deg); >.right_block > .firsrt_bloks > li > a.id7

   OUR SERVICES
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt sit amet erat malesuada interdum. Aenean sodales dui quis leo fermentum scelerisque. Fusce condimentum dolor justo, ac tristique diam iaculis at.

Поворот или отражение объекта

Браузер не поддерживает видео.

В PowerPoint можно поворачивать и переворачивать объекты, такие как текстовые поля, фигуры и рисунки.

Коснитесь объекта, который вы хотите повернуть.
Выберите маркер поворота сверху объекта и перетащите его в нужном направлении.
Чтобы отразить объект, выберите Упорядочивать >повернуть >Отразить вращая по вертикали или Отразить горизонтали.

Для более точного перемещения выберите Упорядочивать >повернуть > Другие параметры поворота, чтобы увидеть параметры меню.