CSS
3D-преобразования

замечания

3D-куб

3D-преобразования могут использоваться для создания множества трехмерных фигур. Вот простой пример куба 3D CSS:

HTML:

<div class="cube">
  <div class="cubeFace"></div>
  <div class="cubeFace face2"></div>
</div>

CSS:

body {
  perspective-origin: 50% 100%;
  perspective: 1500px;
  overflow: hidden;
}
.cube {
  position: relative;
  padding-bottom: 20%;
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
  transform: rotateY(45deg) rotateX(0);
}
.cubeFace {
  position: absolute;
  top: 0;
  left: 40%;
  width: 20%;
  height: 100%;
  margin: 0 auto;
  transform-style: inherit;
  background: #C52329;
  box-shadow: inset 0 0 0 5px #333;
  transform-origin: 50% 50%;
  transform: rotateX(90deg);
  backface-visibility: hidden;
}
.face2 {
  transform-origin: 50% 50%;
  transform: rotatez(90deg) translateX(100%) rotateY(90deg);
}
.cubeFace:before, .cubeFace:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  background: inherit;
  box-shadow: inherit;
  backface-visibility: inherit;
}
.cubeFace:before {
  top: 100%;
  left: 0;
  transform: rotateX(-90deg);
}
.cubeFace:after {
  top: 0;
  left: 100%;
  transform: rotateY(90deg);
}

Просмотреть этот пример
Дополнительный стиль добавляется в демонстрационную версию, а преобразование применяется при наведении, чтобы просмотреть 6 граней куба.

Следует отметить, что:

• 4 лица выполнены с псевдоэлементами
• Привязанные преобразования

противоположная сторона-видимость

Свойство backface-visibility относится к 3D-преобразованиям.

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

Например, это отбросит элемент от экрана:

JSFIDDLE

<div class="flip">Loren ipsum</div>
<div class="flip back">Lorem ipsum</div>

.flip {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-backface-visibility: visible;
  -moz-backface-visibility:    visible;
  -ms-backface-visibility:     visible;
}

.flip.back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  -ms-backface-visibility:     hidden;
}

Firefox 10+ и IE 10+ поддерживают backface-visibility без префикса. Для Opera, Chrome, Safari, iOS и Android все нужно -webkit-backface-visibility .

Он имеет 4 значения:

1. visible (по умолчанию) - элемент всегда будет отображаться, даже если он не обращен к экрану.
2. hidden - элемент не отображается, если он не обращен к экрану.
3. inherit - свойство получит свое значение из своего родительского элемента
4. initial - устанавливает свойство по умолчанию, которое видно

Указатель компаса или форма иглы с использованием 3D-преобразований

CSS

div.needle {
  margin: 100px;
  height: 150px;
  width: 150px;
  transform: rotateY(85deg) rotateZ(45deg);
  /* presentational */
  background-image: linear-gradient(to top left, #555 0%, #555 40%, #444 50%, #333 97%);
  box-shadow: inset 6px 6px 22px 8px #272727;  
}

HTML

<div class='needle'></div>

В приведенном выше примере форма стрелки иглы или компаса создается с использованием 3D-преобразований. Обычно, когда мы применяем rotate на элементе, вращение происходит только по оси Z, и в лучшем случае мы получим только алмазные формы. Но когда к rotateY добавляется rotateY преобразование, элемент сжимается по оси Y и, таким образом, становится похожим на иглу. Чем больше поворот оси Y, тем более сжимается элемент.

Результатом вышеприведенного примера будет игла, опирающаяся на ее наконечник. Для создания иглы, которая покоится на ее основании, вращение должно быть вдоль оси X, а не вдоль оси Y. Таким образом, значение свойства transform должно быть чем-то вроде rotateX(85deg) rotateZ(45deg); ,

Это перо использует аналогичный подход для создания чего-то, что напоминает логотип Safari или циферблат компаса.

Скриншот элемента без преобразования:

Скриншот элемента с только двумерным преобразованием:

Скриншот элемента с 3D-преобразованием:

3D-эффект текста с тенью

HTML:

<div id="title">
  <h1 data-content="HOVER">HOVER</h1>
</div>

CSS:

*{margin:0;padding:0;}
html,body{height:100%;width:100%;overflow:hidden;background:#0099CC;}
#title{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  perspective-origin:50% 50%;
  perspective:300px;
}
h1{
  text-align:center;
  font-size:12vmin;
  font-family: 'Open Sans', sans-serif;
  color:rgba(0,0,0,0.8);
  line-height:1em;
  transform:rotateY(50deg);
  perspective:150px;
  perspective-origin:0% 50%;
}
h1:after{
  content:attr(data-content);
  position:absolute;
  left:0;top:0;
  transform-origin:50% 100%;
  transform:rotateX(-90deg);
  color:#0099CC;
}
#title:before{
  content:'';
  position:absolute;
  top:-150%; left:-25%;
  width:180%; height:328%;
  background:rgba(255,255,255,0.7);  
  transform-origin: 0 100%;
  transform: translatez(-200px) rotate(40deg) skewX(35deg);
  border-radius:0 0 100% 0;
}

Просмотреть пример с дополнительным эффектом зависания

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

Тень преобразуется соответствующим образом, чтобы она соответствовала тексту. Поскольку это сделано с псевдоэлементом и атрибутом data , он наследует форму преобразований, являющуюся ее родительской (тег H1).

Белый «свет» выполнен с #title элемента #title . Он перекошен и использует граничный радиус для закругленного угла.