Поиск…


замечания

Система координат

3D-преобразования выполнены в соответствии с векторной системой координат (x, y, z) в евклидовом пространстве .

На следующем рисунке показан пример координат в евклидовом пространстве:

Евклидово пространство

В CSS,

  • Ось x представляет собой горизонтальную (левую и правую)
  • Ось y представляет собой вертикальную (вверх и вниз)
  • Ось z представляет собой глубину (вперед и назад / ближе и дальше)

На следующем рисунке показано, как эти координаты переводятся в CSS:

3D-система координат 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 граней куба.

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

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

Свойство 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;
}

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

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

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

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

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



Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow