3D домик на CSS3

в 18:45, , рубрики: css, css3, метки:

Привет всем! В этой статье я хочу акцентировать внимание о такой интересной вещи в 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.

Для того, чтобы всё выглядело более трёхмерно и ощутимо, немного повернём всю композицию. Пропишем для .boxtransform: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(http://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

Поделиться

* - обязательные к заполнению поля