Блог

Главная - Вопросы по программированию - Может ли кто-нибудь помочь мне со свойством transform-origin в этом 3D-поле?

Может ли кто-нибудь помочь мне со свойством transform-origin в этом 3D-поле?

#html #css #3d

#HTML #css #3D

Вопрос:

Я играю с 3D в CSS: http://codepen.io/Varin/pen/VKrdvG

Что я хочу сделать, так это иметь возможность изменять точку поворота каждой стороны куба на край куба. Я хочу добиться текущего эффекта наведения, хотя мне нужно было не только повернуть верхнюю плоскость, но и переместить ее с помощью translateX и translateZ (см. Несколько последних строк CSS), поскольку точка поворота установлена для середины плоскости. Что мне нужно сделать, чтобы изменить его на край квадрата? Вот полный код:

РЕДАКТИРОВАТЬ ps. Я знаю, что transform-origin каким-то образом отвечает за точку поворота, но я не могу понять это правильно…

 $color1:rgba(0,
0,
0,
0.66);
 body {
  background: #fff;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  //width: 100vh;
  height: 100vh;
  //position: relative;
  perspective: 1000px;
  perspective-origin: 50% 100px;
  transition-duration: 5s;
}
.cube {
  //background: #000;
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
}
.cube div {
  background: url(https://pbs.twimg.com/profile_images/690103442493276160/nAc_RInP.png);
  background-size: cover;
  background-position: center center;
  opacity: 0.95;
  // border: solid 1px red;
  position: absolute;
  width: 200px;
  height: 200px;
  box-shadow: inset 0px 0px 30px 10px rgba(0, 0, 0, 0.5);
}
.cube .bottom {
  box-shadow: inset 0px 0px 30px 10px rgba(0, 0, 0, 0.5), 0px 0px 100px 46px rgba(0, 0, 0, 0.5);
}
.back {
  transform: translateZ(-100px) rotateY(180deg);
}
.right {
  transform: rotateY(-270deg) translateX(100px);
  transform-origin: top right;
}
.left {
  transform: rotateY(270deg) translateX(-100px);
  transform-origin: center left;
}
.top {
  transform: rotateX(-90deg) translateY(-100px);
  transform-origin: top center;
  transition-duration: 2s;
}
.bottom {
  transform: rotateX(90deg) translateY(100px);
  transform-origin: bottom center;
}
.front {
  transform: translateZ(100px);
}
@keyframes spin {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(360deg);
  }
}
.cube {
  animation: spin 10s infinite linear;
  amp;: hover {
    .top {
      transform: rotateX(-125deg) translateY(-80px) translateZ(-55px);
    }
  }
}  
 <div class="container">
  <div class="cube">
    <div class="front"></div>
    <div class="back"></div>
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
</div>
</div>

Ответ №1:

Вам всегда понадобится перевод, но, по крайней мере, вы можете настроить его так, чтобы вращение могло применяться равномерно. Это

 transform: translateZ(-100px) rotateX(90deg);

или

 transform: translateZ(-100px) rotateX(135deg);
  

 body {
  background: #fff;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  perspective: 1000px;
  perspective-origin: 50% 100px;
  transition-duration: 5s;
}

.cube {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
}

.cube div {
  background: url(https://pbs.twimg.com/profile_images/690103442493276160/nAc_RInP.png);
  background-size: cover;
  background-position: center center;
  opacity: 0.95;
  position: absolute;
  width: 200px;
  height: 200px;
  box-shadow: inset 0px 0px 30px 10px rgba(0, 0, 0, 0.5);
}

.cube .bottom {
  box-shadow: inset 0px 0px 30px 10px rgba(0, 0, 0, 0.5), 0px 0px 100px 46px rgba(0, 0, 0, 0.5);
}

.back {
  transform: translateZ(-100px) rotateY(180deg);
}

.right {
  transform: rotateY(-270deg) translateX(100px);
  transform-origin: top right;
}

.left {
  transform: rotateY(270deg) translateX(-100px);
  transform-origin: center left;
}

.top {
  transform: translateZ(-100px) rotateX(90deg);
  transform-origin: top center;
  transition-duration: 2s;
}

.bottom {
  transform: rotateX(90deg) translateY(100px);
  transform-origin: bottom center;
}

.front {
  transform: translateZ(100px);
}

@keyframes spin {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(360deg);
  }
}
.cube {
  animation: spin 10s infinite linear;
}
.cube:hover .top {
  transform: translateZ(-100px) rotateX(135deg);
}  
 <div class="container">
  <div class="cube">
    <div class="front"></div>
		<div class="back"></div>
		<div class="top"></div>
		<div class="bottom"></div>
		<div class="left"></div>
		<div class="right"></div>
  </div>
</div>

Комментарии:

1. Спасибо! Я вижу, что порядок важен, сначала переведите, затем поверните. Я думаю, что проблема, с которой я столкнулся, заключалась в том, что я не понимал, что порядок важен, а также я не понимал, что когда я хочу добавить к нему переход, я должен помнить, что мне нужно повторить все предыдущие шаги позиционирования… Спасибо за ответ!