具有嵌套悬停动画的等距形状的无限360度3d旋转

html5 • • 问答

我试图了解如何使用 css 为 3d 对象设置动画。现在我有一个等距类型的形状，当它悬停时会显示它的内部。但另外我想为这个等距形状设置动画以将 360 度旋转为 3d 形状无限。我一直在为每个盒子摆弄它的变换，但它根本不起作用。

任何人都可以帮助我并提供一些提示或解释我如何实现这一目标？

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.cube {
  width: 100px;
  height: 150px;
  position: absolute;
  background-color: red;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 50% auto;
}

.outterstack .left {
  min-width: 100px;
  min-height: 250px;
  transform-origin: 0 0;
  transform: rotate(90deg) skewX(-30deg) scaleY(0.864);
  background-color: grey;
}

.outterstack .right {
  min-height: 100px;
  min-width: 250px;
  transform-origin: 0 0;
  transform: rotate(-30deg) skewX(-30deg) scaleY(0.864);
  position: relative;
  bottom: 250px;
  background-color: grey;
}

.outterstack .up {
  width: 250px;
  height: 250px;
  transform-origin: 0 0;
  transform: rotate(210deg) skew(-30deg) scaleY(0.864);
  position: relative;
  bottom: 350px;
  background-color: violet;
}

.insidestack .left {
  min-width: 50px;
  min-height: 150px;
  transform-origin: 0 0;
  transform: rotate(90deg) skewX(-30deg) scaleY(0.864);
  background-color: black;
}

.insidestack .right {
  min-height: 100px;
  min-width: 150px;
  transform-origin: 0 0;
  transform: rotate(-30deg) skewX(-30deg) scaleY(0.864);
  position: relative;
  bottom: 149px;
  background-color: yellow;
}

.insidestack .up {
  width: 150px;
  height: 150px;
  transform-origin: 0 0;
  transform: rotate(210deg) skew(-30deg) scaleY(0.864);
  position: relative;
  bottom: 249px;
  background-color: green;
}

.one,
.two,
.three,
.oneins,
.twoins,
.threeins,
.four {
  position: relative;
  left: 150px;
  transition: 1s;
}

.one {
  top: 150px;
  z-index: 7;
}

.oneins {
  bottom: 400px;
  z-index: 1;
}

.two {
  bottom: 740px;
  z-index: 5;
}

.twoins {
  bottom: 1200px;
  z-index: 1;
}

.three {
  bottom: 1630px;
  z-index: 3;
}

.threeins {
  bottom: 2120px;
  z-index: 1;
}

.four {
  bottom: 2520px;
  z-index: 1;
}

.cube:hover .one {
  top: 150px;
  z-index: 7;
}

.cube:hover .oneins {
  bottom: 400px;
  z-index: 6;
}

.cube:hover .two {
  bottom: 650px;
  z-index: 5;
}

.cube:hover .twoins {
  bottom: 1200px;
  z-index: 4;
}

.cube:hover .three {
  bottom: 1450px;
  z-index: 3;
}

.cube:hover .threeins {
  bottom: 2000px;
  z-index: 2;
}

.cube:hover .four {
  bottom: 2250px;
  z-index: 1;
}
<div>
  <div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
以上是具有嵌套悬停动画的等距形状的无限360度3d旋转的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容