笔记：
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>实现效果：鼠标停留，立方体旋转。
CSS3 3D变换实例 滚动的正方体
原文地址：https://www.cnblogs.com/yanchenghui/p/8250724.html