Вращение блока css – Как повернуть картинку, например, на 180 гр. (или сделать реверс изображения) средствами css для картинки, задаваемой content в псевдоэлементах?

Leave a Comment / Css / By /

Создание анимации вращения элемента средствами CSS

Вращение элемента средствами CSS

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

Сегодня мы рассмотрим вращение объектов вокруг своей оси. Особенность предлагаемых нами анимаций заключается в том, что вращение будет построено исключительно на правилах CSS, без использования JavaScript-кода.

Вращение двухмерных элементов

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

HTML

<div>
    <div>
        <img alt="Landing page"
 src="/sites/all/themes/mytheme/css/uslugi/uslugi/type1.png">
        <img alt="Landing page"
 src="/sites/all/themes/mytheme/css/uslugi/uslugi/type1h.png">
    </div>
</div>

CSS

.frompic {
    position: relative;
    display:inline-block;
    vertizl-align:top;
    width: 200px;
    height: 200px;
    /* определение глубины поворота */
    -webkit-perspective: 600px; /* webkit */
    -moz-perspective: 600px; /* mozilla */
    -ms-perspective: 600px; /* IE 10 */
    -o-perspective: 600px; /* opera */
    perspective: 600px; /* стандартное указание свойства */
 
}
.block {
    -webkit-transition: -webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    -ms-transition: -moz-transform 0.5s;
    -o-transition: -o-transform 0.5s;
    transition: transform 0.5s; /* продолжительность поворота */
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;   
}
.block:hover {
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -ms-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}
.frompic img {
    position: absolute;
    display:block;
    top: 0px;
    left: 0px;
    width: 200px;
    height: 200px;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;    /* скрытия контента элемента
 после поворота */
}
.frompic {
    left:0px;
}
.img2 {
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );   /* устанавливаем начальное
 положение задней стороны */
}

После корректного переноса этого кода в документ получим следующий результат

Вращение двухмерного элемента

Вращение трехмерных элементов

Несмотря на появление еще одного измерения во вращаемом объекте, организация анимации не слишком усложнилась. Тут важно отметить, что для повышения реалистичности необходимо использовать несколько изображений для формирования третьего измерения. Использование множества картинок сгладит линию перелома в стыках между ними и создастся впечатление объемной рельефной поверхности.

Код для поворота объемного элемента приведен здесь.

HTML

<div>
<div>
	<figure></figure>
	<figure></figure>
	<figure></figure>
	<figure></figure>
	<figure></figure>
</div>
</div>

CSS

.container {
	margin: 100px auto auto 100px;
	position: relative;
	width: 226px;
	height: 316px;
	/* задаем глубину сцене */
	-webkit-perspective: 600px; /* webkit */
	-moz-perspective: 600px; /* mozilla */
	-ms-perspective: 600px; /* IE 10 */
	-o-perspective: 600px; /* opera когда-то
 тоже должна начать понимать */
	perspective: 600px;	/* св-во по стандартам */
}
 
#book { /* поварачивать будет общий контейнер */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
 
	-webkit-transition: -webkit-transform 1.5s;
	-moz-transition: -moz-transform 1.5s;
	-ms-transition: -moz-transform 1.5s;
	-o-transition: -o-transform 1.5s;
	transition: transform 1.5s; /* трансформации будут происходить
 анимированно продолжительностью 0.5 сек */
 
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;/* указываем, что дочерние
 элементы находятся в 3D пространстве */
 
}
#book.flip {	/* добавляя этот класс, поворачиваем
 контейнер на 180 градусов */
	-webkit-transform: rotateY( 180deg );
	-moz-transform: rotateY( 180deg );
	-ms-transform: rotateY( 180deg );
	-o-transform: rotateY( 180deg );
	transform: rotateY( 180deg );
}
 
figure {
	position: absolute;
	display: block;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;	/* если элемент отвернут лицом
 от пользователя, контент этого элемента не виден */
}
.back, .front, .left-1, .left-2, .right {
	background: url(book-texture.jpg);
}
.front {
	width: 100%;
	height: 100%;
	background-position: -276px 0;
	-webkit-transform: rotateY( 0deg ) translateZ(  25px );
	-moz-transform: rotateY( 0deg ) translateZ(  25px );
	-ms-transform: rotateY(0deg) translateZ(  25px );
	-o-transform: rotateY( 0deg ) translateZ(  25px );
	transform: rotateY( 0deg ) translateZ(  25px );
	/* rotateY - поворачиваем грань на нужный угол
 translateZ - т.к. объект имеет толщину*/
}
.back {
	width: 100%;
	height: 100%;
	-webkit-transform: rotateY( 180deg ) translateZ(  25px );
	-moz-transform: rotateY( 180deg ) translateZ(  25px );
	-ms-transform: rotateY(180deg) translateZ(  25px );
	-o-transform: rotateY( 180deg ) translateZ(  25px );
	transform: rotateY( 180deg ) translateZ(  25px );
}
 
/*придаем выпуклости торцу разбиваем его на две 
части и ставим их под небольшим углом друг к другу*/
 
.left-1 {
	background-position: -250px 0;
	width: 28.5px;
	height: 100%;
	-webkit-transform: rotateY( -70deg ) translate3d(-3px, 0, 8px );
	-moz-transform: rotateY( -70deg ) translate3d(-3px, 0, 8px );
	-ms-transform: rotateY(-70deg) translate3d( -3px, 0, 8px );
	-o-transform: rotateY( -70deg ) translate3d( -3px, 0, 8px );
	transform: rotateY( -70deg ) translate3d( -3px, 0, 8px ); 
        -webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-ms-transform-origin: left center;
	-o-transform-origin: left center;
	transform-origin: left center; /* поворачиваю торцы вокруг их
 левой границы: так проще потом расположить элемент (в данном случае) */
}
.left-2 {
	background-position: -225px 0;
	width: 28px;
	height: 100%;
	-webkit-transform: rotateY( -110deg ) translate3d( -24.5px, 0, 8px );
	-moz-transform: rotateY( -110deg ) translate3d(  -24.5px, 0, 8px );
	-ms-transform: rotateY(-110deg) translate3d( -24.5px, 0, 8px );
	-o-transform: rotateY( -110deg ) translate3d( -24.5px, 0, 8px );
	transform: rotateY( -110deg ) translate3d( -24.5px, 0, 8px );
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-ms-transform-origin: left center;
	-o-transform-origin: left center;
	transform-origin: left center;
}
 
.right {
	background-position: -276px 0;
	width: 50px;
	height: 100%;
	-webkit-transform: rotateY( 90deg );
	-moz-transform: rotateY( 90deg );
	-ms-transform: rotateY(90deg);
	-o-transform: rotateY( 90deg );
	transform: rotateY( 90deg );
	top: 0;
	right: 0;
}

После корректного переноса этого кода в документ получим следующий результат

Врщение трехмерного элемента

В каких браузерах работает?
10.0+1.0+1.0+1.0+1.0+1.0+1.0+

Оценок: 7 (средняя 5 из 5)

  • 5678 просмотров

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

CSS перемещение, вращение, 3D

Здравствуйте уважаемые начинающие веб-мастера.

Редкая анимация обходится без свойства transform. Давайте подробно рассмотрим все возможности этого удивительного инструмента CSS, для чего и как он применяется.

Все последующие примеры будут работать при наведении курсора, чтобы Вы могли посмотреть действие свойства transform

За основу возьмём блок <div> прямоугольной формы.

HTML:

<div></div>

CSS:
.div {
width: 150px;
height: 100px;
border: 2px solid #333;
border-radius: 5px;
background: #463E48;
}

В этот css код будем подставлять свойство transform с функциями (значениями) которые оно выполняет.

Уменьшение — увеличение

а) transform: scale(0.5); — масштабирует элемент по горизонтали и вертикали. Число больше единицы увеличивает; элемент, а меньше единицы — уменьшает.

 

б) transform: scaleX(0.5); — масштабирует элемент по горизонтали;

 

в) transform: scaleY(0.5); — масштабирует элемент по вертикали;

 

Наклоны

а) transform: skewX(30deg); — наклоняет элемент на заданный угол по вертикали (в данном случае на 30°). Отрцательное значение наклоняет элемент в другую сторону;

 

б) transform: skewY(30deg); — наклоняет элемент на заданный угол по горизонтали;

 

Перемещение

а) transform: translate(50px); — сдвигает элемент на заданное значение по горизонтали и вертикали;

 

б) transform: translateX(50px); — сдвигает элемент по горизонтали. Положительное значение сдвигает вправо, отрицательное влево.

 

в) transform: translateY(50px); — сдвигает элемент по вертикали. Положительное значение сдвигает вниз, отрицательное значение вверх;

 

Вращение

а) transform: rotate(45deg); — поворот элемента вокруг центра (по умолчанию) на заданный угол;

 

б) transform: rotateY(360deg); — поворот элемента вокруг вертикальной оси. Применяется в 3D и об этом ниже;

в) transform: rotateX(360deg); — поворот элемента вокруг горизонтальной оси. Применяется в 3D;

Отражение

transform: matrix(); — создаёт эффект отражения элемента.

makak
makak

 

Для эффекта отражения в <div> добавляются два изображения, одно из которых будет отражением другого.

HTML:

<div><img src="images/makak.jpg" alt=""><br>
<img src="images/makak.jpg" alt="">
</div>

CSS:

.reflect {
transform: matrix(1, 0, 0, -1, 0, 0);
opacity: 0.5;
}

Вид отражения можно менять изменяя комбинацию первых четырёх цифр меняя их от 1 до -1. Пятая цифра двигает элемент по оси Х, шестая по оси Y.

3D

transform-style: preserve-3d; — создаёт 3D эффект.

 

 

HTML
<div>
<div></div>
</div>
CSS
/*Создаём бокс для двух элементов*/
.main-box {
width: 100px;
height: 100px;
border: 2px solid #463E48;
/* Подключаем свойство transform-style для 3D */
transform-style: preserve-3d;
/* Подключаем анимацию для вращения и обзора */
animation: main-rotate 10s infinite linear;
}
/* Наружний квадрат */
.outer {
position: absolute;
width: 100px;
height: 100px;
/* Прозрачность для лучшего визуального восприятия */
opacity: 0.7;
}
/*Внутренний квадрат*/
.interior {
/* Отодвигаем внурь и уменьшаем масштаб */
transform: translateZ(-5em) scale(0.8);
background: #463E48;
}
/* Анимация вращение вокруг вертикальной оси*/
@keyframes main-rotate {
100% {
transform: rotateY(360deg);
}
}

Точка координат

transform-origin: x y z; — задаёт координаты точки относительно центра, вокруг которой будет вращаться элемент.

В плоскости используются два значения (x y), в 3D три значения (x y z)

Вот примерно так всё и делается.

Теперь Вы можете к элементу подключить анимацию с заданным временем исполнения, а затем в правиле @keyframes указать свойство transform с нужной функцией в начале и в конце цикла.

Например: элемент будет постепенно наклоняться в течении анимации

@keyframes main-rotate {
0% {
transform: skewY(0);
}
100% {
transform: skewY(30deg);
}

Желаю творческих успехов.

Рекомендую: Бесплатные HTML шаблоны на русском от TemplateMonster

Поворот текста под заданным углом средствами CSS

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

наклон текста под углом

Замена текста картинкой

Наиболее примитивным решением поставленной задачи станет использование картинки. Средствами небезызвестной всем программы Adobe Photoshop текст без труда поворачивается на любой угол. Как вы понимаете, не нужно много ума, чтобы воспользоваться данным методом.

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

  • Невозможность пользователю копировать информацию, в указанном контейнере;
  • Сложность процедуры внесения исправлений в текстовую часть элемента;
  • Увеличивается трафик на сервере сайта;
  • Рост обращений к серверу при обновлении ресурса.

Несмотря на то, что нашлось такое количество негативных сторон применения картинки, у метода есть пару положительных эффектов.

  • Кроссбраузерность – отсутствие проблем при отображении в разных браузерах.
  • Высокая способность в позиционировании изображения.

Все-таки в данном случае отрицательные стороны перевешивают. Советую Вам обратиться к другим решениям.

Использование свойства CSS transform

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

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

Важно отметить, что меняет положение не текст внутри блока, а именно сам блок, к которому обращено свойство через селектор класа или каким-либо другим способом. Ниже представлен пример использования метода

CSS

.conteiner {
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

По итогу получим примерно такую картину:

Поворот текста

Обращаюсь к такому свойству, оформление без проблем будет выводится в Firefox, Opera, Internet Explower и других вебкит-браузерах.

Обращение через Javascript

Суть процесса полностью аналогична рассмотренному перед этим методом. Для его реализации необходим минимум знаний js-кода, математики и разбираться в фильтре Matrix.

Javascript

var deg2radians = Math.PI * 2 / 360,
deg = -4;
rad = deg * deg2radians,
costheta = Math.cos(rad),
sintheta = Math.sin(rad);
jQuery('.rotatedBlock').css({ filter: 'progid:DXImageTransform.Microsoft.Matrix
(M11='+costheta+', M12='+(-1)*sintheta+', M21='+sintheta+',
 M22='+costheta+', SizingMethod="auto expand", enabled=true)'});

По итогу получим в браузере ту же картину, что и при использовании свойства transform.

Даже если Вы ни символа не понимаете в этой записи – не беда. Для работы с этим кодом достаточно понимать, что во второй строчке прописывается значение угла, его вы подставляете под себя, остальное – просто копируете без изменений.

Особенности использования Javascript и CSS

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

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

Более сложный и индивидуальный подход основывается на применении свойства transform-origin. Суть этой методики будет описана в последующих статьях.

Следующее отличие кроется в сущности самого поворота. При использовании js-кода точка поворота находится на краю блока. Во втором способе эта точка расположена в центре элемента. Для упрощения понимания смотрим на картинку ниже

суть процесса поворота

Оценок: 3 (средняя 5 из 5)

  • 6536 просмотров

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

CSS3 — Эффект вращения

Как сделать эффект вращения на CSS3

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

 

 

 

 

 

Файл index.html

Итак, приступим. Создайте у себя на компьютере файл с названием index.html и напишите следующий код:

В файле index.html мы сделали стандартную html разметку и в body создали div с классом rotate. Также мы подключили между тегами head файл style.css.

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

 

Файл style.css

Создайте файл style.css и вставьте в него следующий текст:

Для красоты мы добавили CSS3 фильтр grayscale, делающий наш div черно-белый. О фильтрах css мы поговорим в следующих статьях. 

Для совместимости с другими браузерами, мы добавили -webkit-transform, ms-transition и ms-transform.

 

Результат

Наведите курсор мыши на красный квадрат(или коснитесь пальцем в мобильном устройстве) и посмотрите результат.

 

 

 

 

Видеоурок: Как сделать эффект вращения на CSS3

 

 

В этом видеоуроке, мы писали код в редакторе SublimeText3 с плагином Emmet. Подробнее об этом замечательном редакторе и плагине Emmet вы можете прочитать в нашей статье: Sublime Text 3 — удобный редактор кода для веб-разработчиков

Вступайте в нашу группу VK и следите за новыми статьями.



Читайте также



Все материалы с сайта wh-db.com и ru.wh-db.com защищены авторским правом. Копирование, публикация, продажа и распространение материала строго запрещены.

CSS анимация с помощью ключевых кадров