Question

我想像this pen一样旋转立方体的侧面。

我尝试创建一个可沿x轴旋转的立方体，但同时我希望它在一段时间后也能扩展其侧面。

下面是我的代码...

.wrapper{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.cube-wrap {
  width: 40px;
  height: 40px;
  -webkit-perspective: 2000px;
  -webkit-perspective-origin: 50% -500px;
}

.single-box {
  display: block;
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #60c2ef;
  -webkit-transform: rotateY(45deg) translateZ(-200px) rotateX(15deg);
  -webkit-transform-origin: 50% 50% 0;            
}

.box {
  -webkit-transform-style: preserve-3d;
  -webkit-animation: rotate 1.5s infinite linear;
}

.side-front { 
  background-color: blue;
  -webkit-transform: translateZ(20px);
}

.side-back { 
  background-color: blue;
  -webkit-transform: rotateY(180deg) translateZ(20px);
}

.side-top {
  background-color: blue;
  -webkit-transform: rotateX(90deg) translateZ(20px);
}

.side-bottom { 
  background-color: blue;
  -webkit-transform: rotateX(-90deg) translateZ(20px); 
}

.side-left { 
  background-color: blue;
  -webkit-transform: rotateY(-90deg) translateZ(20px); 
}

.side-right { 
  background-color: blue;
  -webkit-transform: rotateY(90deg) translateZ(20px); 
}

@-webkit-keyframes rotate {
  0% { -webkit-transform: rotateY(0); }
  100% { -webkit-transform: rotateY(360deg); }
}

<div class="wrapper">
    <div class="cube-wrap">
        <div class="box">
            <div class="single-box side-back"></div>
            <div class="single-box side-top"></div>
            <div class="single-box side-bottom"></div>
            <div class="single-box side-left"></div>
            <div class="single-box side-right"></div>
           <div class="single-box side-front"></div>
       </div>
    </div>
</div>

以上代码将沿x轴旋转。没事。伴随着这样，比如说3秒钟左右，我希望立方体缓慢旋转并沿侧面扩展...我该怎么做？有人可以帮我吗？

Answer 1

这听起来像是一个愚蠢的答案。.但是答案实际上已经存在于您自己提供的Codepen中。

如果您不熟悉sass / codepen。在Codepen中，您可以选择下拉图标，然后选择查看已编译的CSS

我建议复制已经存在的代码，然后根据自己的需要对其进行自定义。您也可以拨叉并在Codepen环境中进行更改。

旋转时如何扩展立方体的侧面？

1 个答案: