Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов
Вы здесь
Главная → Блог → CSS → Вращение элемента средствами CSS

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

Раздел: 
CSS

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

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

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

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

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

HTML

<div class="frompic pic1" id="pic1">
    <div class="block">
        <img class="img1" alt="Landing page"
 src="/sites/all/themes/mytheme/css/uslugi/uslugi/type1.png">
        <img class="img2" 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 class="container" id="container">
<div id="book">
	<figure class="back"></figure>
	<figure class="front"></figure>
	<figure class="left-1"></figure>
	<figure class="left-2"></figure>
	<figure class="right"></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+
Ключевые слова: 
CSS приемы

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

CSS база. Или что должен знать каждый верстальщик
Уровень сложности:
Средний