css3立体旋转动画

2022-08-27 15:19:41

效果图

在别人网站上看到一个立体旋转的例子，然后突然想到自己前几天学习的css3旋转，就试着做了一个例子，看起来有一些粗糙。

html结构很简单：

<div>

    <ul class="ani">

      <li class="r1"></li>

      <li class="r2"></li>

      <li class="r3"></li>

      <li class="r4"></li>

      <li class="r5"></li>

      <li class="r6"></li>

    </ul>

</div>

核心是一个ul，li列表，其中6个li通过不同的属性设置分别构成立方体的6个面，然后外围ul沿Y轴旋转，当然你也可以任意设置。

关于transform更多讲解，请看transform应用详解另外还可参考案例css3+js打造炫酷图片展示

注意，在做立体效果时一定注意在父元素添加transform-style: preserve-3d;属性，字面理解变换形式，3d透视与平面，当设置为flat时，表示在flat平面变换。

下面主要是css属性设置，

 *{margin:0px;padding:0px}

 body{background-color:#}

 div{-webkit-perspective:;-webkit-transform-style: preserve-3d;position:absolute;top:%;left:%;}

 ul{position:absolute;left:0px;top:0px;-webkit-transform:translate(-%,-%);width:200px;height:200px; -webkit-transform-style: preserve-3d }

 li{list-style-type:none;position:absolute;top:0px;left:0px;right:0px;bottom:0px;width:200px;height:200px;font-size:100px;text-align:center;line-height:200px;opacity:0.3;-webkit-transition: -webkit-transform 2s, opacity 2s;border:2px solid #C09;box-shadow:1px 1px 10px #C09; -webkit-backface-visibility: visible;color:#fff}

 .ani{ -webkit-animation: rotaY 5s infinite linear;}

 @-webkit-keyframes rotaY{

   from{-webkit-transform:rotateY(0deg) }

   to{-webkit-transform:rotateY(-360deg) }

 }

 @-webkit-keyframes rotaX{

   from{-webkit-transform:rotateX(0deg)}

   to{-webkit-transform:rotateX(-360deg)}

 }

 @-webkit-keyframes rotaZ{

   from{-webkit-transform:rotateZ(0deg)}

   to{-webkit-transform:rotateZ(-360deg)}

 }

 .r1{-webkit-transform:translateZ(100px)}

 .r2{-webkit-transform:rotateY(90deg) translateZ(100px) }

 .r3{-webkit-transform: rotateY(180deg) translateZ(100px)}

 .r4{-webkit-transform: rotateY(-90deg)translateZ(100px) }

 .r5{-webkit-transform: rotateX(90deg) translateZ(100px) }

 .r6{-webkit-transform:rotateX(-90deg) translateZ(100px) }

有一点就是设置元素的水平垂直居中，absolute,top,left,translate即可方便搞定。

在构建正方体时，我们首先设置各个li元素为绝对定位，在这一步，这6个li元素是相互重合的，第二步设置translateZ与rotateY与rotateX，

可以想象一下，现在旋转中心在整个div的中心，当沿Y轴旋转90度时，这个页面是完全垂直于视平面的，这时候再加translateZ，这样就形成了我们的第一个面，距离中心100px，

其他面都是同样的道理，对于上下两个面则需要采用沿X轴旋转，但是他们距中心的距离是相同的即translateZ，这样分别设置每个元素的旋转方向和变换之后便形成了一个立方体。

如有问题及错误或者更好的解决办法，请联系我。

另自己新建立了一个qq群：85530789,欢迎志同道合的朋友一起多多交流技术。（现在好多技术群基本都聊不了多少真正的技术话题，失望了）

码农公寓

相关文章