1、2D转换
2D转换包括四个方面：位移，缩放，旋转，倾斜
位移【让元素移动位置】 ??????transform: translate(100px,100px); ?????备注： ?????????1. 如果只设置一个值，那么代表在水平方向移动 ?????????2. 如果设置两个值，那么第一个值代表水平方向，第二个值代表垂直方向 ?????????3. 可以设置负数，负数代表相反方向 ?????????4. 通过translate移动元素位置的时候，是相对元素自己本身，可以设置百分比。缩放【放大缩小】： ?????transform: scale(2,1); ?????备注： ????????1. 如果设置的是一个值，那么代表当前元素的宽度和高度同时放大或缩小对应的倍数。 ????????2. 如果设置两个值，第一个值代表宽度的放大或缩小，第二值代表高度的放大或缩小。 ????????3. 设置的值不能带任何单位,不能设置负数。 ????????4. 设置大于0 小于1的值，代表缩小。 ????????5. 给父元素设置缩放的时候不会影响子元素。旋转： ????transform: rotate(角度) ?????????备注： ?????????1. 角度的单位是deg ???例如： 30deg ?????????2. 如果设置的是正数那么代表顺时针旋转，反之逆时针旋转。倾斜： ????transform: skew(45deg,45deg); ????备注： ???????1. 如果设置一个值，代表当前元素是沿着x轴，让y轴倾斜了 ???????2. 如果设置两个值，第一个值沿着x轴，让y轴倾斜，第二值代表沿着y轴，x轴发生倾斜。
注意： ????1. transform属于复合属性。如果设置多个值的时候，要使用复合写法： ???????transform: translate(length, length) rotate() scale(0, 0) skew(angle, angle); ????2. 默认元素在旋转或者倾斜的时候，是按照中心点进行旋转的。
?如果希望改变旋转点（旋转轴），通过transform-origin 设置即可。
????????取值可以是具体的方位名称： left ?| right | bottom ?| top
????????或者可以设置具体值: ????????transform-origin: right bottom; ????????transform-origin: right 200px;
2、2D转化案例
鼠标悬浮在盒子上，盒子向右移动：<!DOCTYPE html>
<html lang="en"><head> ?<meta charset="UTF-8"> ?<meta name="viewport" content="width=device-width, initial-scale=1.0"> ?<meta http-equiv="X-UA-Compatible" content="ie=edge"> ?<title>Document</title> ?<style> ???div { ?????width: 100px; ?????height: 100px; ?????background-color: red;
// 过渡属性 ?????transition: transform 1s linear; ????}
???div:hover { ???????// 设置向正方向移动400px ?????transform: translate(400px,0); ????} ?</style></head><body> ?<div></div></body></html>3、3D转换
位移 ????1. transfrom: translateX(值); ??正数代表向右移动，负数代表向左移动 ????2. transform:translateY(值); ??正数代表向下移动，负数代表向上移动 ????3. transform:transalteZ(值)； ??正数代表朝向我们自己移动，负数代表背向移动 ?????备注： ?????????1. 3D位移也是相当元素自己。 ?????????2. 3D位移也可以设置百分比旋转 ????1. transform: rotateX(值deg)； ????2. transform: rotateY(值deg); ????3. transform: rotateZ(值deg); ????遵循左手法则，坐标轴也跟着旋转缩放 ?????1. transform: scaleX(2) ???????2. transform: scaleY(2)
透视：
?1. 要给父元素设置perspective;
?2. perspective的取值可以影响我们视觉上的效果差。【600-1000推荐设置的值】
转换为立体效果：
transform-style: preserve-3d;
4、3D转换案例
俩个盒子重叠在一起，鼠标悬浮在上面，一个盒子旋转45°。
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.box{ ???????????width: 200px; ???????????height: 200px; ???????????margin: 100px auto; ???????????position: relative; ???????????transform-style: preserve-3d; ???????} ???????.box > div{ ???????????width: 100%; ???????????height: 100%; ???????????position: absolute; ???????} ???????.box .front{ ???????????background: red; ???????} ???????.box .back{ ???????????background: green; ???????????/* transform: skew(0,0) rotateX(0deg); */ ???????????transition: all 1s linear; ???????} ???????.box .back:hover { ???????????transform: skew(45deg,0) rotateX(45deg); ???????} ???</style></head><body> ???<div class="box"> ???????<div class="front"></div> ???????<div class="back"></div> ???</div></body></html>CSS3新特性—transform
原文地址：https://www.cnblogs.com/houfee/p/9241446.html