13_旋转的立方体.html 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <style>
  9. *{
  10. margin: 0;
  11. padding: 0;
  12. }
  13. body{
  14. perspective: 800px;
  15. }
  16. #container{
  17. width: 200px;
  18. height: 200px;
  19. margin: 100px auto;
  20. transform-style: preserve-3d;
  21. position: relative;
  22. animation: run 2s linear infinite;
  23. }
  24. #container div{
  25. width: 200px;
  26. height: 200px;
  27. opacity: 0.5;
  28. border: 1px solid #000;
  29. position: absolute;
  30. }
  31. #div1{
  32. background: url("image/a.jpg");
  33. transform: translateZ(100px);
  34. }
  35. #div2{
  36. background: url("image/b.jpg");
  37. transform: rotateY(180deg) translateZ(100px)
  38. }
  39. #div3{
  40. background: url("image/c.jpg");
  41. transform: rotateY(-90deg) translateZ(100px);
  42. }
  43. #div4{
  44. background: url("image/d.jpg");
  45. transform: rotateY(90deg) translateZ(100px);
  46. }
  47. #div5{
  48. background: url("image/e.jpg");
  49. /* transform: translateY(-100px) rotateX(30deg); */
  50. transform: rotateX(90deg) translateZ(100px)
  51. }
  52. #div6{
  53. background: url("image/f.jpg");
  54. transform: rotateX(-90deg) translateZ(100px);
  55. }
  56. @keyframes run{
  57. 100%{
  58. transform: rotateY(360deg);
  59. }
  60. }
  61. </style>
  62. </head>
  63. <body>
  64. <div id="container">
  65. <!-- <img src="image/a.jpg" alt="">
  66. <img src="image/b.jpg" alt="">
  67. <img src="image/c.jpg" alt="">
  68. <img src="image/d.jpg" alt="">
  69. <img src="image/e.jpg" alt="">
  70. <img src="image/f.jpg" alt=""> -->
  71. <div id="div1"></div>
  72. <div id="div2"></div>
  73. <div id="div3"></div>
  74. <div id="div4"></div>
  75. <div id="div5"></div>
  76. <div id="div6"></div>
  77. </div>
  78. </body>
  79. </html>