3D魔方动画效果-优快云博客

本文链接：https://blog.youkuaiyun.com/ProgrammingWhite/article/details/104686404

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>魔方</title>
       <link rel="stylesheet" type="text/css" href="css/万能css.css"/>
       <style type="text/css">
           body{
               height: 100%;
               width: 100%;
           }
           .box{
               width:200px;
               height:200px;
               margin: auto;
               position:absolute;
               top:0;left:0;right:0;bottom:0;
               transition: 5s;
               transform-style:preserve-3d;
               animation: play 6s linear infinite;
           }
           .box li{
               width:200px;
               height:200px;
               position: absolute;
               top:0;left:0;
               transition:5s
           }
           .box li:nth-child(1){
               background:red;
               transform: translateZ(100px);
           }
           .box li:nth-child(2){
               background:red;
               transform: translateZ(-100px) rotateY(180deg);
               transform-origin: center;
           }
           .box li:nth-child(3){
               background:blue;
               transform: translateX(-100px) rotateY(-90deg);
               transform-origin: center;
           }
           .box li:nth-child(4){
               background:blue;
               transform: translateX(100px) rotateY(90deg);
               transform-origin: center;
           }
           .box li:nth-child(5){
               background:pink;
               transform: translateY(-100px) rotateX(90deg);
               transform-origin: center;
           }
           .box li:nth-child(6){
               background:pink;
               transform: translateY(100px) rotateX(-90deg);
               transform-origin: center;
           }
           @keyframes play{
               0%{transform: rotateY(0deg) rotateZ(0deg); }
               50%{transform: rotateY(180deg) rotateZ(180deg);}
               100%{transform: rotateY(360deg) rotateZ(360deg);}
           }
       </style>
   </head>
   <body>
       <ul class="box">
           <li></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
       </ul>
   </body>
</html>