CSS3 3D变换实例 滚动的正方体
笔记：
2D变换
transform
位移
translateX() translateY()
简写：translate(X值，Y值) 正值向右，负值向左
旋转 rotate()
rotate(？deg) 括号中为角度值 正值是顺时针旋转，负值是逆时针旋转
缩放 scale()
scale() 括号中为数值，可以为浮点数 如大于1是放大效果，小于1是缩小效果
变形（斜切）
skewX() skewY()
简写：skew(X轴斜切角度，Y轴斜切角度)
body:hover div{
transform:translate(100px,100px) rotate(30deg) scale(1.5) skew(40deg,40deg)
}
解析顺序：根据transform内写的顺序进行解析。
变换原点：
transform-orign:
left right top bottom
center（默认） 当设置相应的值后，会按照相应设置的值发生变换。
3D变换
3D效果：首先给需要进行3D变换元素的父级添加3D环境和景深。
写法：
transform-style:preserve-3d; <!--添加3D环境-->
perspective:数值; 如：300px; <!--景深--> 数值较低的话无效果
transform
rotateX 沿X轴旋转：正值向右翻转，负值向左翻转
rotateY 沿y轴旋转：正值向右翻转，负值向左翻转
rotateZ 沿z轴旋转：正值向屏幕外，负值向屏幕内
translateX 沿X轴位移：正值向右，负值向左
translateY 沿y轴位移：正值向下，负值向上
translateZ 沿z轴位移：正值向屏幕外，负值向屏幕内
实例代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>3D正方形实例</title> 6 <style type="text/css"> 7 #box{ 8 width: 100px; 9 height: 100px; 10 padding: 100px; 11 margin: 100px auto; 12 perspective:300px; 13 } 14 15 #val{ 16 width: 100px; 17 height: 100px; 18 position: relative;/*设置相对定位*/ 19 transform-style: preserve-3d;/*给父级设置3D环境*/ 20 transform-origin: center center -50px;/*沿中轴线转动*/ 21 transition: 1s;/*响应时间1s*/ 22 } 23 #val div{ 24 position: absolute;/*设置绝对定位*/ 25 width: 100px; 26 height: 100px; 27 background: blue; 28 text-align: center; 29 font: 40px/100px "微软雅黑"; 30 } 31 #val div:nth-of-type(1){ 32 background: yellow; 33 } 34 #val div:nth-of-type(2){ 35 left:-100px;/*定位 沿X轴向左移动100px*/ 36 background: red; 37 transform-origin: right;/*位移点为右边*/ 38 transform:rotateY(-90deg);/*向Y轴翻转向左90度*/ 39 } 40 #val div:nth-of-type(3){ 41 top:-100px;/*定位 沿Y轴向上移动100px*/ 42 background:pink; 43 transform-origin: bottom;/*位移点为下边*/ 44 transform:rotateX(90deg); /* 沿X轴向内翻转90度*/ 45 } 46 #val div:nth-of-type(4){ 47 left:100px; 48 background: #FF6600; 49 transform-origin: left; 50 transform:rotateY(90deg); 51 } 52 #val div:nth-of-type(5){ 53 top:100px; 54 background: #1883BA; 55 transform-origin: top; 56 transform:rotateX(-90deg); 57 } 58 #val div:nth-of-type(6){ 59 background: gray; 60 transform:translateZ(-100px) rotateX(-180deg); /*翻转180度,不然数字6为镜像显示*/ 61 } 62 #val:hover { 63 transform: rotateY(360deg) ; /*鼠标停留,X轴旋转360度,Y轴旋转30度*/ 64 } 65 </style> 66 </head> 67 <body> 68 <div id="box"> 69 <div id="val"> 70 <div>1</div> 71 <div>2</div> 72 <div>3</div> 73 <div>4</div> 74 <div>5</div> 75 <div>6</div> 76 </div> 77 </div> 78 </body> 79 </html>
实现效果：鼠标停留，立方体旋转。
