首页 > 代码库 > css3-实现3D立方体旋转
css3-实现3D立方体旋转
核心内容：
- 1.CSS3 中 animation、perspective 属性的熟练运用。
- 2.CSS3 中的变形属性 transform，在 3D 立体效果中的运用。
- 3.3D 立方体旋转实现原理。
实例：
创建大小两个盒子，小盒子放在大盒子里面，通过3D立体定位调整各自的位置，呈现一个立方体的现状；然后定义鼠标移入后的动画帧事件。实现如下效果图一样的模型。
HTML：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>css3-3d旋转</title> 5 <meta charset = "utf-8"> 6 <link rel="stylesheet" type="text/css" href="css3-3d-scale.css"> 7 </head> 8 <body> 9 <div class="wrap">10 <div class="cube">11 <div class="out-front">前</div>12 <div class="out-back">后</div>13 <div class="out-left">左</div>14 <div class="out-right">右</div>15 <div class="out-top">上</div>16 <div class="out-bottom">下</div>17 18 <span class="in-front">1</span>19 <span class="in-back">2</span>20 <span class="in-left">3</span>21 <span class="in-right">4</span>22 <span class="in-top">5</span>23 <span class="in-bottom">6</span>24 </div>25 </div>26 </body>27 </html>
CSS：
1 html { 2 background:linear-gradient(#fe4 0%, #040 80%); 3 height:100%; 4 } 5 @keyframes rotate { 6 0%{ 7 transform:rotateX(0deg) rotateY(0deg); 8 } 9 100%{ 10 transform:rotateX(360deg) rotateY(360deg); 11 } 12 } 13 .wrap { 14 margin-top:180px; 15 perspective:1000px; 16 } 17 .cube { 18 margin:auto; 19 width:200px; 20 height:200px; 21 position:relative; 22 transform-style:preserve-3d; 23 // transform:rotateX(-50deg) rotateY(-30deg); 24 animation:rotate 20s infinite linear; 25 } 26 .cube>div { 27 width:100%; 28 height:100%; 29 position:absolute; 30 background-color:#84d; 31 opcity:.1; 32 border:1px #8ed solid; 33 color:#fff; 34 font-size:36px; 35 font-weight:bold; 36 font-family:"Microsoft Yahei"; 37 text-align:center; 38 line-height:200px; 39 } 40 .cube .out-front { 41 transform:translateZ(100px); 42 } 43 .cube .out-back { 44 transform:translateZ(-100px); 45 } 46 .cube .out-left { 47 transform:rotateY(90deg) translateZ(-100px); 48 } 49 .cube .out-right { 50 transform:rotateY(90deg) translateZ(100px); 51 } 52 .cube .out-top { 53 transform:rotateX(90deg) translateZ(100px); 54 } 55 .cube .out-bottom { 56 transform:rotateX(90deg) translateZ(-100px); 57 } 58 .cube:hover .out-front { 59 transform:translateZ(200px); 60 } 61 .cube:hover .out-back { 62 transform:translateZ(-200px); 63 } 64 .cube:hover .out-left { 65 transform:rotateY(90deg) translateZ(-200px); 66 } 67 .cube:hover .out-right { 68 transform:rotateY(90deg) translateZ(200px); 69 } 70 .cube:hover .out-top { 71 transform:rotateX(90deg) translateZ(200px); 72 } 73 .cube:hover .out-bottom { 74 transform:rotateX(90deg) translateZ(-200px); 75 } 76 .cube>span { 77 display:block; 78 width:100px; 79 height:100px; 80 border:1px #4f0 solid; 81 background-color:#4fe; 82 position:absolute; 83 top:50px; 84 left:50px; 85 opcity:.9; 86 color:#fff; 87 font-size:16px; 88 font-weight:bold; 89 font-family:"Microsoft Yahei"; 90 text-align:center; 91 line-height:100px; 92 } 93 .cube .in-front { 94 transform:translateZ(50px); 95 } 96 .cube .in-back { 97 transform:translateZ(-50px); 98 } 99 .cube .in-left {100 transform:rotateY(90deg) translateZ(-50px);101 }102 .cube .in-right {103 transform:rotateY(90deg) translateZ(50px);104 }105 .cube .in-top {106 transform:rotateX(90deg) translateZ(50px);107 }108 .cube .in-bottom {109 transform:rotateX(90deg) translateZ(-50px);110 }
实例效果图：
点击查看在线演示-demo
源代码下载：github/Qboooogle
css3-实现3D立方体旋转
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。