Question

我有这个立方体，我旋转它，所以我会看到它的对角线。我怎么能围绕这个特定的对角线旋转这个立方体？我尝试了不同的旋转，但似乎没有什么适合我。我正在寻找CSS唯一的解决方案/ explenation。

.container {
  width: 200px;
  height: 200px;
  position: absolute;
  perspective: 10000px;
  left: 50vw;
  top: 50vh;
  transform: translateX(-50%) translateY(-50%);
}
.cube {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
}
.cube figure {
  margin: 0;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  border: 2px solid black;
  box-sizing: border-box;
}
.cube .front {
  transform: rotateY(0deg) translateZ(100px);
}
.cube .back {
  transform: rotateX(180deg) translateZ(100px);
}
.cube .right {
  transform: rotateY(90deg) translateZ(100px);
}
.cube .left {
  transform: rotateY(-90deg) translateZ(100px);
}
.cube .top {
  transform: rotateX(90deg) translateZ(100px);
}
.cube .bottom {
  transform: rotateX(-90deg) translateZ(100px);
}
.cube {
  transform: rotateY(35deg) rotateX(45deg);
}
.cube:hover {
  transition: all 1s;
  transform: rotateY(35deg) rotateX(45deg);
}

<section class="container">
  <div class="cube">
    <figure class="front"></figure>
    <figure class="back"></figure>
    <figure class="right"></figure>
    <figure class="left"></figure>
    <figure class="top"></figure>
    <figure class="bottom"></figure>
  </div>
</section>

Answer 1

找到它 - 这解决了我的问题（将鼠标悬停在立方体上）。

说明：从右到左计算变换堆栈。因此，如果我们想要旋转围绕z轴变换的元素，我们需要将此变换设置为第一个。

如果原件是

SessionExpiry

然后

transform: translateX(-50%) translateY(-50%);

将围绕观察者z轴旋转元素（所需效果）

transform: rotateZ(value) translateX(-50%) translateY(-50%);

将围绕其Z轴旋转元素

transform: translateX(-50%) translateY(-50%) rotateZ(value);

.container {
  width: 200px;
  height: 200px;
  position: absolute;
  perspective: 10000px;
  left: 50vw;
  top: 50vh;
  transform: translateX(-50%) translateY(-50%);
}

.cube {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
}

.cube figure {
  margin: 0;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  border: 2px solid black;
  box-sizing: border-box;
}

.cube .front  { transform: rotateY(   0deg ) translateZ( 100px ); }
.cube .back   { transform: rotateX( 180deg ) translateZ( 100px ); }
.cube .right  { transform: rotateY(  90deg ) translateZ( 100px ); }
.cube .left   { transform: rotateY( -90deg ) translateZ( 100px ); }
.cube .top    { transform: rotateX(  90deg ) translateZ( 100px ); }
.cube .bottom { transform: rotateX( -90deg ) translateZ( 100px ); }

.cube {
  transform: rotateY(35deg) rotateX(45deg);
}

.cube:hover {
  transition: all 1s;
  transform:rotateZ(60deg) rotateY(35deg) rotateX(45deg);
}

围绕它的对角线旋转立方体

1 个答案: