1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 6 <!-- 3D认知 --> 7 <style type="text/css"> 8 /* 9 3D动画 10 CSS中的3D坐标: 右为X正方向 下为Y正方向 前为Z正方向 11 旋转方向: 左手拇指朝正方向握拳, 四指弯曲方向为旋转的正方向; 12 rotateX() 绕X轴旋转 13 rotateY() 绕Y轴旋转 14 rotateZ() 绕Z轴旋转 15 */ 16 .box .rotateX img{ 17 transition: all 3s; 18 } 19 20 .rotateX:hover img { 21 transform: rotateX(180deg); 22 } 23 24 /* 2. translate 移动 25 3. spective: 透视 只有设置了这个属性才能显示3D的效果 26 perspective在这里设置是box下的所有子标记都有这个属性 27 */ 28 .box { 29 perspective: 1000px; 30 } 31 32 .box .translateX { 33 transition: all 3s; 34 } 35 36 .translateX { 37 width: 200px; 38 height: 200px; 39 background-color: red; 40 } 41 /* 42 translateX() 向右移动 43 translateY() 向下移动 44 translateZ() 向前移动 45 perspective在这里设置是只有.translateX都有这个属性 46 transform: perspective(1000px) translateZ(300px); 47 */ 48 .translateX:hover{ 49 transform: translateZ(300px); 50 } 51 52 </style> 53 54 <!-- 实例: 立方体 --> 55 <style type="text/css"> 56 57 body { 58 margin: 0; 59 padding: 0; 60 background-color: #f7f7f7; 61 } 62 63 .cube { 64 width: 400px; 65 height: 400px; 66 margin: 100px auto; 67 /*perspective: 1000px;*/ 68 69 /*以3D方式呈现*/ 70 transform-style: preserve-3d; 71 transform: rotateX(-30deg) rotateY(30deg); 72 73 position: relative; 74 } 75 76 .front, .back, .left, .right, .top, .bottom { 77 width: 100%; 78 height: 100%; 79 line-height: 400px; 80 text-align: center; 81 font-size: 40px; 82 opacity: 0.5; 83 84 /*使用定位是为了使6个处于同一坐标系*/ 85 position: absolute; 86 left: 0; 87 top: 0; 88 } 89 90 .left { 91 background-color: red; 92 transform: rotateY(90deg) translateZ(-200px); 93 } 94 95 .right { 96 background-color: orange; 97 transform: rotateY(90deg) translateZ(200px); 98 } 99 100 .back { 101 background-color: yellow; 102 transform: rotateY(0deg) translateZ(-200px); 103 } 104 105 .front { 106 background-color: green; 107 transform: rotateY(0deg) translateZ(200px); 108 } 109 110 .bottom { 111 background-color: blue; 112 transform: rotateX(90deg) translateZ(-200px); 113 } 114 115 .top { 116 background-color: purple; 117 transform: rotateX(90deg) translateZ(200px); 118 } 119 120 </style> 121 122 123 </head> 124 <body> 125 126 <!-- 3D认知 --> 127 <div class="box"> 128 <div class="rotateX"> 129 <img src="images/002.jpg"> 130 </div> 131 132 <div class="translateX"></div> 133 </div> 134 135 <!-- 立方体 --> 136 <div class="cube"> 137 <div class="front">front</div> 138 <div class="back">back</div> 139 <div class="left">left</div> 140 <div class="right">right</div> 141 <div class="top">top</div> 142 <div class="bottom">bottom</div> 143 </div> 144 145 </body> 146 </html>