3D трансформации в CSS

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

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

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

3D куб на CSS

Хочу показать вам шикарное видео, которое очень доступно объясняет ряд свойств и методов в CSS.

В видео - куб сделанный в 3D, и если понять как всё это работает и включить фантазию, то можно сверстать очень много самых разных прикольных штук

Список свойств из видео:

• perspective - создает 3D пространство для элементов
• transform-origin - определяет относительно какой точки элемент будет трансформироваться
• transform-style - сохраняет 3D пространство для дочерних элементов
• backface-visibility - отвечает за отображение обратной стороны элемента

Список методов для свойства transform:

• perspective - создает 3D пространство для одного элемента
• translateZ - двигает элемент по оси Z
• translate3d - сдвигает элемент по всем осям
• scaleZ - масштабирует ось Z
• scale3d - масштабирует элемент по всем осям
• rotateX - вращает элемент по оси X
• rotateY - вращает элемент по оси Y
• rotateZ - вращает элемент по оси Z

Нажмите на кнопку чтобы посмотреть демо:

Посмотреть демо

В отличии от оригинального кода в видео, я немного уменьшил размеры куба (чтобы он поместился в окне) и сделал цветными его стороны.

HTML

<div class="demo-cub">
    <div class="container">
      <div class="cube">
        <div class="side front">front</div>
        <div class="side back">back</div>
        <div class="side right">right</div>
        <div class="side left">left</div>
        <div class="side top">top</div>
        <div class="side bottom">bottom</div>
      </div>
    </div>
</div>

CSS

demo-cub * {
	box-sizing: border-box;
}

.demo-cub {
    background: #3e5d75;
    overflow: hidden;
    width: 100%;
    max-height: 600px;
}
.demo-cub .container {
	position: relative;
	margin: 130px auto;
	width: 200px;
	height: 200px;
	perspective: 500px;
}
.cube {
	width: inherit;
	height: inherit;
	transform-style: preserve-3d;
}
.side {
	position: absolute;
	width: inherit;
	height: inherit;
	border: 4px solid #fff;
	font: normal 48px Arial;
	text-align: center;
	line-height: 190px;
	color: #fff;
    backface-visibility: hidden; /* видимость обратной стороны */
}
.front {
	transform: translateZ(100px);
    background: rgb(253, 90, 62);
}
.back {
	transform: rotateY(180deg) translateZ(100px);
}
.right {
	transform: rotateY(90deg) translateZ(100px);
    background: rgb(151, 204, 100);
}
.left {
	transform: rotateY(-90deg) translateZ(100px);
    background: rgb(119, 182, 231);
}
.top {
	transform: rotateX(90deg) translateZ(100px);
    background: rgb(169, 85, 184);
}
.bottom {
	transform: rotateX(-90deg) translateZ(100px);
    background: rgb(255, 217, 99);
}

JavaScript

(function () {
	var rotateY = 0,
	    rotateX = 0;

	document.onkeydown = function (e) {
		if (e.keyCode === 37) rotateY -= 4
		else if (e.keyCode === 38) rotateX += 4
		else if (e.keyCode === 39) rotateY += 4
		else if (e.keyCode === 40) rotateX -= 4

		document.querySelector('.cube').style.transform = 'rotateY(' + rotateY + 'deg)' + 'rotateX(' + rotateX + 'deg)';
    }
})();