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

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

куб

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

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

  В этой записи будут 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)';
    }
})();

 

 

 

Комментарии 0

*** чтобы писать комментарии.