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

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