Стилизация будет такая:/*--- Container for cube animation ---*/#viewStage{ width: 450px; height: 300px; -webkit-perspective: 450px; -webkit-perspective-origin: 50% 50%;}/*--- Cube Style ---*/.cube{ position: relative; float: left; width: 150px; height: 300px; /* Cube Transforms attributes */ -webkit-transform-style: preserve-3d; -webkit-transform-origin: 50% 50%;}/*--- Cubes' Face Style ---*//* Face share attributes */.cube div{ background-color: #000; background-size: 450px 300px; position: absolute; -webkit-transform-origin: 50% 50%; -webkit-backface-visibility: hidden;}/* Face group fb - Front and Back */.cube div.fb{ width: 150px; height: 300px;}/* Face group tb - Top and Bottom */.cube div.tb{ width: 150px; height: 300px;}/* Face group lr - Left and Right */.cube div.lr{ width: 400px; height: 400px;}/* Individual Face attributes */.facefront{ -webkit-transform: translateZ(150px);}.facebck{ -webkit-transform: rotateY(180deg) rotateZ(180deg) translateZ(150px);}.facetop{ -webkit-transform: rotateX(90deg) translateZ(150px);}.facebottom{ -webkit-transform: rotateX(-90deg) translateZ(150px);}.faceleft{ -webkit-transform: rotateY(90deg) translateZ(0px);}.faceright{ -webkit-transform: rotateY(-90deg) translateZ(150px);}Атрибут -webkit-backface-visibility используется к элементу и указывает ему должен ли он быть видимым, если не обращен к экрану. По умолчанию значение - видим.Наша следующая задача будет состоять в том, чтобы связать поверхности кубов с различными изображениями и расположением их, согласно расположению кубов./*--- Cubes' faces ---*/.facefront{ background-image: url(../image1.jpg); -webkit-transform: translateZ(150px);}.facebck{ background-image: url(../image3.jpg); -webkit-transform: rotateY(180deg) rotateZ(180deg) translateZ(150px);}.facetop{ background-image: url(../image2.jpg); -webkit-transform: rotateX(90deg) translateZ(150px);}.facebottom{ background-image: url(../image4.jpg); -webkit-transform: rotateX(-90deg) translateZ(150px);}.faceleft{ -webkit-transform: rotateY(90deg) translateZ(0px);}.faceright{ -webkit-transform: rotateY(-90deg) translateZ(150px);}/* Background position */#cube1 div{ background-position: 0 0;}#cube2 div{ background-position: -150px 0;
Первым шагом будет создание нескольких кубов и объединение их в один большой куб. Достичь этого мы можем за счет дублирования приведенной выше html разметки куба и использования различных css стилей. Также всем элементам куба дадим различные идентификаторы (ID).<div id="viewStage"> <div id="cube1" class="cube" > <div class="facefront fb"></div> <div class="faceback fb"></div> <div class="faceleft lr"></div> <div class="faceright lr"></div> <div class="facetop tb"></div> <div class="facebottom tb"></div> </div> <div id="cube2" class="cube" > <div class="facefront fb"></div> <div class="faceback fb"></div> <div class="faceleft lr"></div> <div class="faceright lr"></div> <div class="facetop tb"></div> <div class="facebottom tb"></div> </div> <div id="cube3" class="cube" > <div class="facefront fb"></div> <div class="faceback fb"></div> <div class="faceleft lr"></div> <div class="faceright lr"></div> <div class="facetop tb"></div> <div class="facebottom tb"></div> </div></div>
Итак, после рассмотрения основного принципа построения куба, используя css3 3d transform, пройдемся по разметке первого Демо. Однако тут мы исключили некоторые префиксы для браузеров (-moz), чтобы уменьшить объем, но в исходниках они есть.
Однако, эти html элементы не могут автоматически стать кубом без помощи css3 3d transform./*--- Container for cube animation ---*/#viewStage{ -webkit-perspective: 1000px; -webkit-perspective-origin: 600px 600px;}/*--- Cube Style ---*/.cube{ position: relative; width: 300px; height: 300px; /* 3D Transforms attributes */ -webkit-transform-style: preserve-3d; -webkit-transform-origin: 50% 50%;}/* Each cube's face share same attributes */.cube div{ position: absolute; width: 300px; height: 300px; opacity:.7; -webkit-transform-origin: 50% 50%;}/*--- Cube faces color ---*/.facefront{ background-color: red; -webkit-transform: translateZ(150px);}.faceback{ background-color: blue; -webkit-transform: rotateY(180deg) rotateZ(180deg) translateZ(150px);}.facetop{ background-color: green; -webkit-transform: rotateX(90deg) translateZ(150px);}.facebottom{ background-color: purple; -webkit-transform: rotateX(-90deg) translateZ(150px);}.faceleft{ background-color: black; -webkit-transform: rotateY(90deg) translateZ(150px);}.faceright{ background-color: yellow; -webkit-transform: rotateY(-90deg) translateZ(150px);}Элемент #viewStage - это контейнер внутри которого будет происходить наша 3D анимация. Все элементя внутри будут перемещаться и вращаться относительно #viewStage, который сам останется фиксированным на странице.Атрибут perspective определет, как далеко по оси Z может располагаться 3D элемент. Чем большее значение, тем менее очевидным будет 3D эффект.Если вы вставите html код и css разметку приведенную выше в ваш текстовый редактор и запустите этот файл в браузере, то увидите красочный куб. Если браузер у вас не поддерживает 3D transform, то на экране будут два отличающихся по цвету прямоугольника.Попробуйте изменить значение perspective и посмотрите, что станет с кубом.
А начнем мы с нащего центрального элемента в уроке - куба.Как мы знаем куб имеет 6 граней - front, back, top, bottom, left, right (передняя, задняя, верхняя, нижняя, левая, правая). С помощью html мы должны "обозначить" все эти грани и отделить их друг от друга различными css классами.<div id="viewContainer"> <div class="cube" > <div class="facefront"></div> <div class="faceback"></div> <div class="faceleft"></div> <div class="faceright"></div> <div class="facetop"></div> <div class="facebottom"></div> </div></div>
Идея заключается в создании слайдера в котором смена изображений происходит за счет 3D вращения кубов на которые "разрезается" картинка.Замечу, что не все браузеры поддерживают свойство css3 3D transform. 3D эффект можно увидеть только в Chrome и Safari.
Сегодня будет создавать 3D анимацию вращения используя css3 3d transform и css3 animation без использования javascript.
3D анимация вращения куба
Загрузка. Пожалуйста, подождите...
3D анимация вращения куба » Скрипты для сайтов
Комментариев нет:
Отправить комментарий