Привет всем! В этой статье я хочу акцентировать внимание о такой интересной вещи в CSS3, как 3D — преобразования. Тема, на мой взгляд очень интересная и перспективная.
Основное свойство для совершения пространственных операций с элементами страницы, это свойство transform. Про это свойство можно почитать, например, вот тут .
Также нам понадобятся очень важное свойство transform-style, которое позволит видеть всё содеянное в формате 3D.
Для того, чтобы продемонстрировать возможности всех этих “плюшек”, я решил создать дом в 3D, на чистом CSS3.
Создаём “коробку” дома
Итак, приступим.
1) Для начала создадим 6 заготовок — 4 стены, крыша, пол. В качестве фона к стенам установим заранее подготовленные изображения. Пол и потолок текстурировать не будем. Все детали можно подписать для большей ясности. Должно получиться что-то вроде этого
2) Затем придадим нашим стенам, полу и потолку абсолютное позиционирование. Получится следующее . Получилось, что все “доски” у нас в “стопке”.
3) А сейчас мы проведём первые 3D-манипуляции. Для этого пропишем свойство transform-style:preserve-3d. Нужно оно для того, чтобы потомки элемента, к которому применено это свойство отображались не в плоскости родительского элемента, а в пространстве. Пропишем его в свойствах блока .box, т.к. он является родителем нашим стенам, которые имеют классы .side1-.side6.
А теперь установим на своё место лицевую сторону нашего домика. Для этого для side1 пропишем transform:rotateX(-90deg) translate3D(0, -50%, 75px), что означает, что мы поворачиваем сторону на минус 90 градусов по оси X и переносим её в пространстве на 75 пикселей вдоль оси Z и на минус половины длины вдоль оси Y.
Для того, чтобы всё выглядело более трёхмерно и ощутимо, немного повернём всю композицию. Пропишем для .box — transform:rotateX(40deg) rotateZ(25deg).
Разумеется нормально будет это всё работать только в Chrome и Safari. И мы будем добавлять перед свойствами префикс -webkit-.
Вот что у нас должно получиться: демо
4) Путём поворотов и перемещений помещаем остальные стены на свои места. Не буду расписывать, где какие значения, всё можно увидеть в коде. Обратите внимание, что стены должны располагаться лицом наружу, на случай использования свойства backface-visibility, которое делает элемент невидимым при просмотре с оборатной стороны. Это можно конролировать с помощью включённого этого свойства, либо нанесением на стену надписи или цифры для проверки читаемости. Второй способ я счёл более удобным. Должно получиться как-то так:
5) Теперь всё это накроем “потолком”. Для этого просто перенесём блок номер 5 по оси Z. В итоге, имеем готовую коробку.
Демо
Ниже приведу полный код примера:
HTML:
<body>
<article>
<div class="haus">
<div class="box">
<div class="side1"></div>
<div class="side2"></div>
<div class="side3"></div>
<div class="side4"></div>
<div class="side5">Потолок</div>
<div class="side6">Пол</div>
</div>
</div>
</article>
</body>
CSS:
.box {
/*указываем параметры расположения контейнера, позиционирование - абсолютное*/
position:absolute;
top:20%; left:10%;
margin-left:-50px; margin-top:-50px;
width:150px; height:150px;
/*тип трансформаций*/
-webkit-transform-style:preserve-3d;
/*Поворот всего объекта*/
-webkit-transform:rotateX(65deg) rotateZ(35deg);
}
.box div{
/*Универсальные свойства сторон*/
position:absolute;
height:150px;
width:150px;
/*background:gray; */
border:1px solid black;
}
.side1{
background: url("images/1.jpg");
-webkit-transform:rotateX(-90deg) translate3D(0, -50%, 75px);
}
.side2{
background: url("images/2.jpg");
-webkit-transform:rotateX(-90deg) rotateY(-90deg) translate3D(0, -50%, 75px);
}
.side3{
background: url("images/3.jpg");
-webkit-transform:rotateX(-90deg) rotateY(180deg) translate3D(0, -50%, 75px);
}
.side4{
background: url("images/4.jpg");
-webkit-transform:rotateX(-90deg) rotateY(90deg) translate3D(0, -50%, 75px);
}
.side5{
background:blue;
-webkit-transform:translate3D(0, 0, 150px);
}
.side6{
background:green;
}
Делаем крышу
Следующим этапом построения дома будет создание крыши.
Она представляет собой два прямоугольных ската и два треугольных фронтона.
1) Для начала создадим и установим “шифер”. Это два ската под углом 45 градусов. Для удобства создадим “пол” и установим ему какой-нибудь цвет. Получится вот так
2) Далее создадим фронтоны крыши. Для этого создадим два треугольника и установим их на место. Как это сделать на CSS можно почитать тут: http://habrahabr.ru/post/126207/.
К сожалению, я не додумался, как можно было прикрутить картинку к треугольнику. Пытался поизвращаться со свойством border-image, но ничего не получилось, поэтому просто залил треугольники равномерным цветом.
Демо
Объединяем
Теперь, когда у нас готова и коробка и крыша мы можем объединить их в одну общую конструкцию. Несколько манипуляций и мы получаем готовое жилище.
Ниже приводится полный код готового домика:
HTML:
<div class="haus">
<div class="box">
<div class="side1"></div>
<div class="side2"></div>
<div class="side3"></div>
<div class="side4"></div>
<div class="side5"></div>
<div class="side6"></div>
</div>
<div class="roof">
<div class="skat1"></div>
<div class="skat2"></div>
<div class="fronton1"></div>
<div class="fronton2"></div>
</div>
</div>
CSS:
.haus {
/*указываем параметры расположения контейнера, позиционирование - абсолютное*/
position:absolute;
top:50%; left:20%;
margin-left:-50px; margin-top:-50px;
width:150px; height:150px;
/*тип трансформаций*/
-webkit-transform-style:preserve-3d;
/**/
-webkit-transform:rotateX(65deg) rotateZ(35deg);
}
.box{
-webkit-transform-style:preserve-3d;
}
.box div{
/*Универсальные свойства сторон*/
position:absolute;
height:150px;
width:150px;
border:1px solid black;
}
.side1{
background: url("http://habrastorage.org/storage2/132/48c/375/13248c375b61571eb9c5ac0fc93d50a3.jpg");
-webkit-transform:rotateX(-90deg) translate3D(0, -50%, 75px);
}
.side2{
background: url("http://habrastorage.org/storage2/b7c/c61/775/b7cc6177513094344974117b4e801413.jpg");
-webkit-transform:rotateX(-90deg) rotateY(-90deg) translate3D(0, -50%, 75px);
}
.side3{
background: url("http://habrastorage.org/storage2/957/52d/a55/95752da553a8c98898803d2576b8dda5.jpg");
-webkit-transform:rotateX(-90deg) rotateY(180deg) translate3D(0, -50%, 75px);
}
.side4{
background: url("http://habrastorage.org/storage2/43e/ef3/4a8/43eef34a8da54c1aaaef0a798ac6b7b3.jpg");
-webkit-transform:rotateX(-90deg) rotateY(90deg) translate3D(0, -50%, 75px);
}
.side5{
background:blue;
-webkit-transform:translate3D(0, 0, 150px);
}
.side6{
background:green;
}
/*КРЫША*/
.roof div{
position:absolute;
}
.roof{
-webkit-transform-style:preserve-3d;
position:absolute;
-webkit-transform:translate3D(0px,-20px,150px);
}
.skat1{
width:150px;
height:105px;
background:url("http://habrastorage.org/storage2/a10/8c9/db1/a108c9db193dd29a0874edebead6c5c5.jpg");
-webkit-transform-origin:0 0 0;
-webkit-transform:rotateX(-45deg) translate3D(0,0,105px);
}
.skat2{
width:150px;
height:105px;
background:url("http://habrastorage.org/storage2/a10/8c9/db1/a108c9db193dd29a0874edebead6c5c5.jpg");
-webkit-transform-origin:0 0 0;
-webkit-transform:rotateX(45deg) translate3D(0,0,0);
}
/*наши треугольники-фасады*/
.fronton1{
z-index:500;
width:0px;
height:0px;
border-left:75px solid transparent;
border-right:75px solid brown;
border-top:75px solid transparent;
border-bottom:75px solid transparent;
-webkit-transform:rotateY(90deg) translate3D(-50%,0,75px);
-webkit-border-right-image:url(https://habrastorage.org/storage2/d41/360/986/d41360986e9f936ca6a40417de75623f.jpg) round;
}
.fronton2{
z-index:500;
width:0px;
height:0px;
border-left:75px solid transparent;
border-right:75px solid brown;
border-top:75px solid transparent;
border-bottom:75px solid transparent;
-webkit-transform:rotateY(90deg) rotateX(180deg) translate3D(-50%,0,75px);
}
Также можно добавить немного анимации и оживить наше пространство.
Получится вот так: zen5.ru/demo/1/9.html
Это же на jsfiddle: jsfiddle.net/pMCEE/
Итак, мы рассмотрели с вами пример использования 3D — трансформаций на практике. Буду рад замечаниям и дополнениям.
PS Всё будет работать только в Chrome
Автор: Niksg
