魔方旋转代码效果图展示

image.png

  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>魔方</title>
  7.     <style type="text/css">
  8.         body{
  9.             -webkit-perspective: 800px;
  10.                     perspective: 800px;
  11.             -webkit-perspective-origin: 70% 0%;
  12.                     perspective-origin: 70% 0%;
  13.                     margin: 0 auto;
  14.                     background: rgba(0,0,255,0.5);
  15.         }
  17.         .dice{
  18.             position: relative;
  19.             left: 45%;
  20.             top: 250px;
  21.             display: inline-block;
  22.             width: 100px;
  23.             height: 100px;
  24.             margin: 10px;
  25.             -webkit-transform-style: preserve-3d;
  26.                     transform-style: preserve-3d;
  28.         }
  30.         .dice > div{
  31.             position: absolute;
  32.             width: 100%;
  33.             height: 100%;
  34.             box-shadow: inset 0 0 20px rgba(0,0,0,.8);
  35.             text-align: center;
  36.             line-height: 100px;
  37.         }
  39.         .d1{
  40.             -webkit-transform: rotate3d(50,50,50,0deg);
  41.                     transform: rotate3d(50,50,50,0deg);
  42.         }
  44.         .f1 > div{
  45.             margin: 0px;
  46.             padding: 0px;
  47.             width: 31px;
  48.             height: 31px;
  49.             border: 1px solid black;
  50.             /*设置边框线*/
  51.             float: left;
  52.             /*靠左浮动*/
  53.             border-radius: 3px;
  54.             /*这是边框圆角*/
  55.         }
  57.         .d1 > div{
  58.             backface-visibility: hidden;
  59.             /*背面不可见*/
  60.         }
  62.         .front{
  63.             background: blue;
  64.             -webkit-transform: translateZ(50px);
  65.                     transform: translateZ(50px);
  66.         }
  68.         .back{
  69.             background: #0bea26;
  70.             -webkit-transform: rotateY(180deg) translateZ(50px);
  71.                     transform: rotateY(180deg)translateZ(50px);
  72.         }
  74.         .left{
  75.             background: red;
  76.             -webkit-transform: rotateY(-90deg) translateZ(50px);
  77.                     transform: rotateY(-90deg) translateZ(50px);
  78.         }
  80.         .right{
  81.             background: #ff7600;
  82.             -webkit-transform: rotateY(90deg) translateZ(50px);
  83.                     transform: rotateY(90deg) translateZ(50px);
  84.         }
  86.         .top{
  87.             background: white;
  88.             -webkit-transform: rotateX(90deg) translateZ(50px);
  89.                     transform: rotateX(90deg) translateZ(50px);
  90.         }
  92.         .bottom{
  93.             background: yellow;
  94.             -webkit-transform: rotateX(-90deg) translateZ(50px);
  95.                     transform: rotateX(-90deg) translateZ(50px);
  96.         }
  98.         .d1:hover{
  99.             -webkit-transform: rotate3d(50,50,50,800deg);
  100.                     transform: rotate3d(50,50,50,800deg);
  101.                     transition: transform 5s ease-in-out 0.2s;
  102.         }
  103.     </style>
  104. </head>
  105. <body>
  106.     <div class="dice d1">
  107.         <div class="f1 front">
  108.             <div></div>
  109.             <div></div>
  110.             <div></div>
  111.             <div></div>
  112.             <div></div>
  113.             <div></div>
  114.             <div></div>
  115.             <div></div>
  116.             <div></div>
  117.         </div>
  118.         <div class="f1 back">
  119.             <div></div>
  120.             <div></div>
  121.             <div></div>
  122.             <div></div>
  123.             <div></div>
  124.             <div></div>
  125.             <div></div>
  126.             <div></div>
  127.             <div></div>
  128.         </div>
  129.         <div class="f1 left">
  130.             <div></div>
  131.             <div></div>
  132.             <div></div>
  133.             <div></div>
  134.             <div></div>
  135.             <div></div>
  136.             <div></div>
  137.             <div></div>
  138.             <div></div>
  139.         </div>
  140.         <div class="f1 right">
  141.             <div></div>
  142.             <div></div>
  143.             <div></div>
  144.             <div></div>
  145.             <div></div>
  146.             <div></div>
  147.             <div></div>
  148.             <div></div>
  149.             <div></div>
  150.         </div>
  151.         <div class="f1 top">
  152.             <div></div>
  153.             <div></div>
  154.             <div></div>
  155.             <div></div>
  156.             <div></div>
  157.             <div></div>
  158.             <div></div>
  159.             <div></div>
  160.             <div></div>
  161.         </div>
  162.         <div class="f1 bottom">
  163.             <div></div>
  164.             <div></div>
  165.             <div></div>
  166.             <div></div>
  167.             <div></div>
  168.             <div></div>
  169.             <div></div>
  170.             <div></div>
  171.             <div></div>
  172.         </div>
  173.     </div>
  174. </body>
  175. </html>