CSS实现3D正方体动态旋转效果【源码+GIF图】
小伙伴们看到那些页面上炫酷的正方体，是不是都觉得美美的很精致，很想自己动手写一个属于自己的，但是又学业繁忙而找不到时间去实现，今天我就为大家写一个，哒哒哒，废话不多说，开始上代码~
额，要不先说说它的实现原理吧，方便理解，嘿嘿。
额，要不先说说它的实现原理吧，方便理解，嘿嘿。
实现原理：
- transition-property 要应用过渡的css属性
- transition-duration 过渡发生的时长
- transition-timing-function 过渡过程速度变化的设置
可设置值:
linear(匀速）ease（缓慢开始，缓慢结束。默认） ease-in（缓慢开始） ease-out（缓慢结束） ease-in-out（缓慢开始，缓慢结束，但与ease速度不同）
- transition-delay 过渡何时开始
- transition 以上属性简写
使用：
不同浏览器需要在属性前加前缀：chrome、Safari 需要加 -webkit-，Firefox前缀-moz-，IE前缀-ms-，Opera前缀-o-
perspective：建立3D场景，实现透视效果，值为物品与屏幕距离
perspective-origin：子元素在视图中的位置，X和Y值表示（注意：perspective和perspective-origin都要在实现3D效果元素的父元素中设置）
transform-style：规定如何在 3D 空间中呈现被嵌套的元素（可设置为flat或preserve-3d）
transform-origin：旋转中心
X轴可设置为：left | center | right
Y轴可设置为：top | center | bottom
Z轴设置在Z轴上的位置：length px
本例中用到的方法有translateX（px），translateY，translateZ，表示在XYZ轴上移动和rotateX（deg），rotateY，rotateZ绕XYZ轴旋转。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } body{ perspective: 600px;; } .box{ width: 400px; height: 400px; margin:100px auto; position:relative; } .box:hover ul{ transform: rotateX(360deg) rotateY(360deg); } ul{ width: 400px; height: 400px; transform: rotateX(-30deg) rotateY(0deg) ; transform-style: preserve-3d; transition: all 10s linear; } li{ list-style: none; width: 200px; height: 200px; border: 1px solid #000; background:rgba(255,56,49,0.5); position: absolute; margin: auto; left: 0; right: 0; bottom:0; top: 0;; } ul :nth-child(1){ transform:rotateY(0deg) translateZ(100px); } ul :nth-child(2){ transform: rotateY(-90deg) translateZ(100px); } ul :nth-child(3) { transform: rotateY(-180deg) translateZ(100px); } ul :nth-child(4){ transform: rotateY(-270deg) translateZ(100px); } ul :nth-child(5){ transform: rotatex(90deg) translateZ(100px); } ul :nth-child(6){ transform: rotatex(90deg) translateZ(-100px); } </style> </head> <body> <div class="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
效果图：