CSS立方体中的RotateX无法正常工作

Question

CSS立方体中的RotateX无法正常工作

我正在学习创建立方体旋转效果.悬停如果我更换rotateX由rotateY立方体为中心Y轴旋转.但是当rotateX存在时,立方体不会围绕X轴居中旋转.如何实现立方体的正确旋转？

#container {
  perspective: 1000px;
  perspective-origin: 0 0;
}
#cube {
  position: relative;
  top: 100px;
  left: 100px;
  width: 200px;
  transform-style: preserve-3d;
  transition: transform 2s;
  transform-origin: 50% 50%;
}
#cube div {
  position: absolute;
  width: 200px;
  height: 200px;
}
#front {
  transform: rotateY(   0deg ) translateZ( 100px );
  background-color: rgba(0,34,62,0.3);
}
#right {
  transform: rotateY(  90deg ) translateZ( 100px );
  background-color: rgba(110,34,162,0.3);
}
#back {
  transform: rotateY( 180deg ) translateZ( 100px );
  background-color: rgba(20,4,62,0.3);
}
#left {
  transform: rotateY( -90deg ) translateZ( 100px );
  background-color: rgba(80,134,2,0.3);
}
#top {
  transform: rotateX(90deg) translateZ(100px);
}
#bottom {
  transform: rotateX(-90deg) translateZ(100px);
}
#cube:hover {
  transform: rotateX(360deg);
}

Run Code Online (Sandbox Code Playgroud)

<html>
  <body>
    <div id="container">
      <div id="cube">
        <div id="front">
          <h1>1</h1>
        </div>
        <div id="right">
          <h1>2</h1>
        </div>
        <div id="back">
          <h1>3</h1>
        </div>
        <div id="left">
          <h1>4</h1>
        </div>
        <div id="top">
          <h1>5</h1>
        </div>
        <div id="bottom">
          <h1>6</h1>
        </div>
      </div>
    </div>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Mos*_*Feu 2

如果我理解正确的话，你只需将#cube的高度设置为200px

#container {
  perspective: 1000px;
  perspective-origin: 0 0;
}
#cube {
  position: relative;
  top: 100px;
  left: 100px;
  width: 200px;
  height:200px;
  transform-style: preserve-3d;
  transition: transform 2s;
  transform-origin: 50% 50%;
}
#cube div {
  position: absolute;
  width: 200px;
  height: 200px;
}
#front {
  transform: rotateY(   0deg ) translateZ( 100px );
  background-color: rgba(0,34,62,0.3);
}
#right {
  transform: rotateY(  90deg ) translateZ( 100px );
  background-color: rgba(110,34,162,0.3);
}
#back {
  transform: rotateY( 180deg ) translateZ( 100px );
  background-color: rgba(20,4,62,0.3);
}
#left {
  transform: rotateY( -90deg ) translateZ( 100px );
  background-color: rgba(80,134,2,0.3);
}
#top {
  transform: rotateX(90deg) translateZ(100px);
}
#bottom {
  transform: rotateX(-90deg) translateZ(100px);
}
#cube:hover {
  transform: rotateX(360deg);
}

Run Code Online (Sandbox Code Playgroud)

<html>
  <body>
    <div id="container">
      <div id="cube">
        <div id="front">
          <h1>1</h1>
        </div>
        <div id="right">
          <h1>2</h1>
        </div>
        <div id="back">
          <h1>3</h1>
        </div>
        <div id="left">
          <h1>4</h1>
        </div>
        <div id="top">
          <h1>5</h1>
        </div>
        <div id="bottom">
          <h1>6</h1>
        </div>
      </div>
    </div>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，7 月前
查看次数：	72 次
最近记录：	9 年，7 月前