Скриншот AtoZ CSS: преобразование rotateY CSS

У меня есть изображение с белой рамкой и тенью. Если я хочу повернуть изображение, я могу сделать это, используя свойство transformrotate()

Положительное значение с поворотом по часовой стрелке и отрицательное значение против часовой стрелки.

 img {
  transform: rotate(10deg);
}

Это то же самое, что использование rotateZ()

При использовании rotateY()

 img {
  transform: rotateY(45deg);
}

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

 img {
  animation: spin 2s infinite linear;
}
@keyframes spin {
  from {transform: rotateY(0deg);}
  to {transform: rotateY(360deg);}
}

Вы можете заметить, что когда элемент поворачивается на 180 градусов, изображение становится зеркальным. По умолчанию задняя часть изображения видна даже при вращении, поэтому ее передняя сторона направлена ​​в сторону от зрителя.

Видимость задней части элемента можно контролировать с помощью свойства backface-visibility Он принимает значения visiblehiddenvisible

Немного более разумное использование поворота — добавить тонкие эффекты к элементам на странице. Браузер поддерживает IE9 +, но, поскольку это довольно незначительный косметический элемент стиля, наличие не повернутых элементов в старом IE для меня не имеет большого значения. Однако всегда стоит проверить себя на всякий случай — на всякий случай.

перспективы

Имея дело с элементами в трехмерном пространстве, мы можем сделать визуальный эффект более экстремальным, привнося перспективу в уравнение.

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

Эта фотография довольно хорошо иллюстрирует перспективу. Но как это работает в CSS?

Здесь у меня есть разметка для куба. Шесть граней куба содержатся в «кубе-х» <div>

 <div class="container"> 
  <div class="cube-z"> 
    <div class="cube-y"> 
      <div class="cube-x"> 
        <div class="face-one">1</div> 
        <div class="face-two">2</div> 
        <div class="face-three">3</div> 
        <div class="face-four">4</div> 
        <div class="face-five">5</div> 
        <div class="face-six">6</div> 
      </div> 
    </div> 
  </div> 
</div>

 .container {
  width: 400px;
  margin: 100px auto;
}
[class^="cube"] {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
}
[class^="face-"] {
  position: absolute;
  width: 200px;
  height: 200px;
  padding: 20px;
  color: rgba(0,0,0,0.75);
  border: 1px solid;

  font-size: 160px;
  font-family: Avenir;
  line-height: 1;
  text-align: center;
}

.face-one {
  transform: translateZ(100px);
  background-color: hsla(329,58%,52%,0.8);  
}
.face-two {
  transform: rotateX(90deg) translateZ(100px);
  background-color: hsla(0,0%,13%,0.8);
}
.face-three {
  transform: rotateY(90deg) translateZ(100px);
  background-color: hsla(54,70%,68%,0.8);
}
.face-four {
  transform: rotateY(-90deg) translateZ(100px);
  background-color: hsla(190,81%,67%,0.8);
}
.face-five {
  transform: rotateX(-90deg) translateZ(100px) rotate(180deg);
  background-color: hsla(261,100%,75%,1.0);
}
.face-six {
  transform: rotateY(180deg) translateZ(100px);
  background-color: hsla(84,76%,53%,0.8);
}
.cube-z {transform: rotateZ(0deg);}
.cube-y {transform: rotateY(0deg);}
.cube-x {transform: rotateX(0deg);}

В настоящий момент первая грань куба видна на 2D-плоскости, а остальные стороны не видны.

Если я поверну «контейнер» вокруг оси Y, мы сможем видеть каждую сторону по очереди.

 .cube-z {animation: spin 4s infinite linear;}

@keyframes spin {
  from {transform: rotateY(0deg);}
  to {transform: rotateY(360deg);}
}

Это дает нам ощущение трех измерений, но если мы добавим немного перспективы, эффект станет намного более четким, и будет получено настоящее ощущение 3D.

 .container {
  perspective: 500px;
  perspective-origin: 25% 50%;
}

Я остановлю анимацию и посмотрим, что здесь происходит.

Свойство перспективы управляет расстоянием между зрителем и нулевой точкой оси z. Более высокое значение перемещает зрителя еще дальше, более низкое — перемещает зрителя ближе, что резко увеличивает влияние трехмерного позиционирования.

Мы можем контролировать размещение точки схода, изменяя свойство perspective-origin

Это свойство принимает два значения длины: первое для горизонтального положения и второе для вертикального. Управление этими значениями изменяет угол обзора элемента, и когда анимация снова включается, эффект может быть весьма впечатляющим.

Мы почти подошли к концу этой серии AtoZ, так что смотрите это место для последнего письма, где я обсуждаю использование z-index