css3 实现正方体3D旋转

亦凉 2022-06-04 00:06 457阅读 0赞

源代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .all{
  8.             margin-left: 200px;
  9.             width: 300px;
  10.             height: 300px;
  11.             perspective: 500px;
  12.             border: 1px solid green;
  13.             transform: rotate(30deg);
  14.             transform-style: preserve-3d;
  15.             transition: 6s;
  16.         }
  17.         .t1{
  19.             width: 0px;
  21.             height: 0px;
  22.             margin-left: 100px;
  23.             border: 50px solid red;
  24.             transform: rotateX(90deg);
  25.             transform-origin: bottom;
  27.         }
  28.         .t2{
  30.             width: 0px;
  31.             height: 0px;
  32.             float: left;
  33.             border:50px solid aquamarine;
  34.             transform: rotateY(-90deg);
  35.             transform-origin: right;
  37.         }
  39.         .t3{
  41.             width: 0px;
  42.             height: 0px;
  43.             float: left;
  44.             margin-left: 100px;
  45.             border:50px solid blue ;
  46.             transform: rotateY(90deg);
  47.             transform-origin:left;
  49.         }
  50.         .t4{
  52.             width: 0px;
  53.             height: 0px;
  54.             margin-left: 100px;
  55.             margin-top: 100px;
  56.             border: 50px solid orange;
  57.             transform: rotateX(-90deg);
  58.             transform-origin: top;
  60.         }
  61.         .t5{
  63.             width: 0px;
  64.             height: 0px;
  65.             margin-left: 100px;
  66.             margin-top: -200px;
  67.             border: 50px solid pink;
  68.             transform: rotateX(0deg);
  69.             transform-origin: bottom;
  71.         }
  72.         .all:hover{
  73.             transform: rotateX(360deg)rotateY(540deg)rotateZ(290deg)scale(1.2);
  74.         }
  76.     </style>
  77. </head>
  78. <body>
  79. <div class="all">
  81.     <div class="t1"></div>
  82.     <div class="t2"></div>
  83.     <div class="t3"></div>
  84.     <div class="t4"></div>
  85.     <div class="t5"></div>
  88. </div>
  89. </body>
  90. </html>

发表评论

表情：
评论列表 （有 0 条评论，457人围观）

还没有评论，来说两句吧...

相关阅读