当前位置：Gxlcms > css > 纯css3实现3D立方体旋转特效代码

纯css3实现3D立方体旋转特效代码

时间：2021-07-01 10:21:17 帮助过：45人阅读

上网易前端微专业课程，里面有一个课外作业是实现一个3D旋转立方体，花了点时间做了下，还有点意思，写个简单教程，供大家学习。 先放上最终要实现的效果 .

  1. <!DOCTYPE html>
  2. <html lang="en"><head><meta charset="UTF-8"><title>CSS3 3D立方体多边形动画特效 - 代码笔记</title><style type="text/css">*{
  3.  margin:0 auto;
  4.     padding:0;
  5. }
  6. @keyframes rotate{
  7.     0%{
  8.         transform:rotateX(0deg) rotateY(0deg);
  9.     }
  10.     100%{
  11.         transform:rotateX(360deg) rotateY(360deg);
  12.     }
  13. }
  14. html{
  15.     background:linear-gradient(#ff0 0%, #000 80%);
  16.     height:100%;
  17. }
  18. .wrap{
  19.     margin-top:200px;
  20.     perspective: 1000px; /* 视图距元素的距离 相当于摄像机 */
  21. }
  22. .cube{
  23.     width:200px;
  24.     height:200px;
  25.     position:relative;
  26.     color:#fff;
  27.     font-size:36px;
  28.     font-weight:bold;
  29.     text-align:center;
  30.     line-height:200px;
  31.     transform-style:preserve-3d; /* 默认flat 2D */
  32.     transform:rotateX(-30deg) rotateY(-70deg); 
  33.     animation:rotate 20s infinite linear; /*播放时间 播放次数为循环 缓动效果为匀速 */
  34. }
  35. .cube > div{
  36.     width:100%;
  37.     height:100%;
  38.     border:1px solid #fff;
  39.     position:absolute;
  40.     background-color:#333;
  41.     opacity:.6;
  42.     transition:transform 0.4s ease-in;
  43. }
  44. .cube .out-front{
  45.     transform: translateZ(100px);
  46. }
  47. .cube .out-back{
  48.     transform: translateZ(-100px) rotateY(180deg);
  49. }
  50. .cube .out-left{
  51.     transform: translateX(-100px) rotateY(-90deg);
  52. }
  53. .cube .out-right{ 
  54.     transform: translateX(100px) rotateY(90deg);
  55. }
  56. .cube .out-top{
  57.     transform: translateY(-100px) rotateX(90deg);
  58. }
  59. .cube .out-bottom{
  60.     transform: translateY(100px) rotateX(-90deg);
  61. }
  62. .cube > span{
  63.     display:block;
  64.     width:100px;
  65.     height:100px;
  66.     border:1px solid black;
  67.     background-color:#999;
  68.     position:absolute;
  69.     top:50px;
  70.     left:50px;
  71. }
  72. .cube .in-front{
  73.     transform: translateZ(50px);
  74. }
  75. .cube .in-back{
  76.     transform: translateZ(-50px) rotateY(180deg);
  77. }
  78. .cube .in-left{
  79.     transform: translateX(-50px) rotateY(-90deg);
  80. }
  81. .cube .in-right{
  82.     transform: translateX(50px) rotateY(90deg);
  83. }
  84. .cube .in-top{
  85.     transform: translateY(-50px) rotateX(90deg);
  86. }
  87. .cube .in-bottom{
  88.     transform: translateY(50px) rotateX(-90deg);
  89. }
  90. .wrap:hover .out-front{
  91.     transform: translateZ(200px);
  92. }
  93. .wrap:hover .out-back{
  94.     transform: translateZ(-200px) rotateY(180deg);
  95. }
  96. .wrap:hover .out-left{
  97.     transform: translateX(-200px) rotateY(-90deg);
  98. }
  99. .wrap:hover .out-right{
  100.     transform: translateX(200px) rotateY(90deg);
  101. }
  102. .wrap:hover .out-top{
  103.     transform: translateY(-200px) rotateX(90deg);
  104. }
  105. .wrap:hover .out-bottom{
  106.     transform: translateY(200px) rotateX(-90deg);
  107. }
  108.  
  109. </style>
  110. </head>
  111. <body>
  112. <div class="wrap">
  113.     <div class="cube">
  114.         <div class="out-front">前面</div>
  115.         <div class="out-back">后面</div>
  116.         <div class="out-left">左面</div>
  117.         <div class="out-right">右面</div> 
  118.         <div class="out-top">上面</div>
  119.         <div class="out-bottom">下面</div>
  120.  
  121.         <span class="in-front"></span>
  122.         <span class="in-back"></span>
  123.         <span class="in-left"></span>
  124.         <span class="in-right"></span>
  125.         <span class="in-top"></span>
  126.         <span class="in-bottom"></span>
  127.     </div>
  128. </div>
  129.  
  130. <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
  131. <p>适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
  132. </div>
  133. </body>
  134. </html>

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 免费css在线视频教程

3. php.cn独孤九贱（2）－css视频教程

以上就是纯css3实现3D立方体旋转特效代码的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！