html { background-image:linear-gradient(to top,#fbc2eb 0%,#a6c1ee 100%); opacity:0.8; height:100%; } .container { margin-top:200px; perspective:1000px; } .cube { height:200px; width:200px; position:relative; margin:auto; transform-style:preserve-3d; animation:rotate 15s infinite; } /*产生旋转,生成立体感*/ @keyframes rotate { from { transfrom:rotateY(0deg) rotateX(0deg); } to { transform:rotateY(360deg) rotateX(360deg); } }/*面的样式*/ .cube > div { height:100%; width:100%; opacity:0.9; position:absolute; text-align:center; background:#333; color:#fff; line-height:200px; font-size:30px; border:1px solid #fff; } /*沿着中心点往外推 100px*/ .front { transform:translateZ(100px); } .back { transform:translateZ(-100px); } .left { transform:rotateY(90deg) translateZ(-100px); } .right { transform:rotateY(90deg) translateZ(100px); } .top { transform:rotateX(90deg) translateZ(100px); } .bottom { transform:rotateX(90deg) translateZ(-100px); }
更新时间:2019-11-22 09:43:16
提供简易的3d旋转体模型,可以附加图片行程一个旋转的图片立方体,目前只为一个简易模型,用户可以进行更多的自定义操作。