<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } body{ background: black; perspective:600px; } #container { margin: 100px auto ; width: 200px; height: 200px; position: relative; -webkit-transform-style: preserve-3d;/*<!--子元素也可以实现动画的语句-->*/ /*-webkit-transform: rotateY(50deg);*/ -webkit-animation: run 4s linear infinite ; } @keyframes run {/*<!--和animation配合使用 -->*/ /*0%{*/ /*}*/ 100%{ -webkit-transform: rotateY(360deg); } } #container div { width: 200px; height: 200px; background: gainsboro; position: absolute; left: 0; top: 0; text-align: center; line-height: 200px; font-size: 50px; border-radius: 10px; opacity: 0.5; } #div1 { -webkit-transform: rotateX(90deg) translateZ(100px); /*<!-- z轴也随着元素旋转 始终垂直元素 -->*/ } #div2 { -webkit-transform: translateZ(100px); z-index: 1; } #div3 { -webkit-transform: rotateY(90deg) translateZ(100px); } #div4 { -webkit-transform: rotateY(180deg) translateZ(100px); } #div5 { -webkit-transform: rotateY(-90deg) translateZ(100px); } #div6 { -webkit-transform: rotateX(-90deg) translateZ(100px); } </style> </head> <body> <div id="container"> <div id="div1">1</div> <div id="div2">2</div> <div id="div3">3</div> <div id="div4">4</div> <div id="div5">5</div> <div id="div6">6</div> </div> </body> </html>
旋转的立方体 css3
猜你喜欢
转载自blog.csdn.net/qq_38912819/article/details/80556617
今日推荐
周排行