Inter-Net.PRO

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

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

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

 

 


Inter-Net PRO аватар
Inter-Net PRO ответил в теме #1 22 дек 2017 22:20

Sansan пишет: Можно на такой куб на его стороны поставить фото и видео?

Конечно можно.
Для этого в css нужно для стороны где должно быть изображение дописать к классу атрибут background-image

Пример:
background-image: url("/images/RedHot.jpg");
в скобках внутри кавычек прописывается путь к изображению. Если изображение находится на сайте, то лучше указывать относительный путь (как в примере). Если изображение на внешнем сайте, то тогда указывается полный урл к изображению начиная с http.

Если изображение не подходит по размеру стороны куба, то тогда добавляем вот так:
background-image: url("/images/RedHot.jpg");
background-attachment: fixed, fixed;
background-size: 100% 100%;
это значит что изображение будет без повторов, на всю сторону куба.
Sansan аватар
Sansan ответил в теме #2 22 дек 2017 19:58
Видео-урок супер!
Посмотрел демо - круть!
Если можно, у меня есть вопрос. Можно на такой куб на его стороны поставить фото и видео?

Авторизация

Войти через соцсети: