在介绍有关transform相关的知识之前，先来讲一下transform-origin的用法以及关于<angle>角度的几种取值单位。另外，在使用时，为了兼容各个浏览器，可加上浏览器的私有前缀［－moz- -webkit -ms-］。
transform-origin
设置对象变换的原点，通常和rotate旋转、scale缩放、skew斜切等一起使用，IE9+
2D情况下：默认值 50% 50%，即center center
3D情况下：默认值 50% 50% 0
取值介绍：
- X轴：left｜center｜right｜length｜%
- Y轴：top｜center｜bottom｜length｜%
- Z轴：length
注意：如果只设置一个值，则该值作用于横坐标，纵坐标默认50%，Z轴默认为0，另外百分比是相对于自身进行计算的。
如：
{ ?transform: rotate(45deg); ?transform-origin: 0 0; ?-ms-transform: rotate(45deg); ????/* IE 9 */ ?-ms-transform-origin: 0 0; ???????????-moz-transform: rotate(45deg); ???/* Firefox */ ?-moz-transform-origin: 0 0; ??-webkit-transform: rotate(45deg); /* Safari Opera and Chrome */ ??-webkit-transform-origin: 0 0;}效果图：
角度的单位
CSS3新增，角度单位有四种，在所有可使用角度的地方均可使用这四种单位，但是需要注意兼容性，除turn单位外其他单位均可兼容IE9+浏览器版本。
单位说明：
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad
单位说明
deg度数，一个圆共360度，IE9+
grad梯度，一个圆共400梯度，IE9+
rad弧度，一个圆共2n弧度，IE9+
turn转、圈，一个圆共1转，IE＋ FireFox13.0+
transform
变换，可对元素进行位移、旋转、缩放、倾斜操作，支持2D或者3D转换，IE9+支持。
目录
- translate 位移
- rotate 旋转
- scale 缩放
- skew 斜切
- 变换综合应用
translate 位移
对象进行2D空间或3D空间的位移。 使用规则：
translate(): 第一个参数指定X轴的位移量[必须], 第二个参数指定Y轴的位移量[当不设置时, 默认为0];translateX(): 指定X轴的位移;translateY(): 指定Y轴的位移;translate3D(): 第一个参数指定X轴的位移量, 第二个参数指定Y轴的位移量, 第三个参数指定Z轴的位移量, 3个参数缺一不可;translateZ(): 指定Z轴的位移;
使用translate时需要注意位移量的百分比是相对元素自身宽高来计算的。
translate有一个最常见的应用，即当元素宽度高度不固定时，使用translate可实现水平以及垂直方向的居中。
代码示例：
???dom结构<div class="box"> ???????<div class="item">center</div> ???</div>
???样式设计 .box{ ???????position: relative; ???????width: 300px; ???????height: 300px; ???????border: 1px solid; ???} ???.item{ ???????position: absolute; ???????padding: 50px; ???????background-color: #fb3; ???????top: 50%; /*相对于父级*/ ???????left: 50%; ???????transform: translate(-50%, -50%); /*相对自身*/ ???????-ms-transform: translate(-50%, -50%); ????????-moz-transform: translate(-50%, -50%); ????????-webkit-transform: translate(-50%, -50%); ????}效果图：
rotate 旋转
对象进行2D空间或3D空间旋转。常与 transform-origin 一起使用。
使用规则：
rotate(): 2D旋转，根据指定的旋转角度进行旋转;rotate3D(): 3D旋转，必须指定四个参数，前3个参数分别表示旋转的方向x y z, 第4个参数表示旋转的角度;rotateX(): 指定X轴的旋转角度;rotateY(): 指定Y轴的旋转角度;rotateZ(): 指定Z轴的旋转角度;
使用rotate时需要注意以下几点：
- 旋转角度必须有单位，否则将报错。
- rotate值为正值时，顺时针旋转；否则逆时针旋转。
- 在2D情况下，rotate()只能指定一个参数；在3D情况下，rotate3D()必须指定四个参数，否则将报错。
旋转45度，代码示例：
/* X轴旋转45度 */ ???.item1{ ???????transform: rotateX(-45deg); ???????-moz-transform: rotateX(-45deg); ???????-ms-transform: rotateX(-45deg); ???????-webkit-transform: rotateX(-45deg); ???} ???/* Y轴旋转45度 */ ???.item2{ ???????transform: rotateY(-45deg); ???????-moz-transform: rotateY(-45deg); ???????-ms-transform: rotateY(-45deg); ???????-webkit-transform: rotateY(-45deg); ???} ???/* Z轴旋转45度 */ ???????.item3{ ???????transform: rotateZ(-45deg); ???????-moz-transform: rotateZ(-45deg); ???????-ms-transform: rotateZ(-45deg); ???????-webkit-transform: rotateZ(-45deg); ???}示例图：
上述例子中的 rotateZ(-45deg);也可以写成 rotate3D(0,0,1,-45deg);，当然相对于X轴、Y轴的也可使用rotate3d的简写形式。
另外，不难看出只指定Z轴的旋转与2D旋转的效果一致。即以下三种写法得到的旋转效果是一样的：
transform: rotate(-45deg);transform: rotate3D(0,0,1,-45deg);transform: rotateZ(-45deg);
scale 缩放
对象进行2D空间或3D空间缩放。常与 transform-origin 一起使用。
使用规则：
scale(): 第一个参数指定X轴的缩放倍数[必须], 第二个参数指定Y轴的缩放倍数[当不设置时, 默认取第一个参数的值];;scaleX(): 指定X轴的缩放倍数;scaleY(): 指定Y轴的缩放倍数;scale3D(): 第一个参数指定X轴的缩放倍数, 第二个参数指定Y轴的缩放倍数, 第三个参数指定Z轴的缩放倍数, 3个参数缺一不可;scaleZ(): 指定Z轴的缩放倍数;
使用scale时需要注意以下几点：
- 参数值为倍数，如：
scale(2);表示放大2倍。 - 参数值是分别相对元素的宽和高进行计算的。即便是scale只设置了一个值，那也是分别计算的。
- 参数值大于1表示放大；0～1之间为缩小；1表示不便；0的时候元素不可见。
- 参数值为负数时，除了元素的方向发生改变[x轴反转]，其他规律与正值一致。
负值的情况，代码示例：
???dom结构<div class="box"> ???????<div class="item">Item</div> ???</div>
???样式设计 .box{ ???????width: 300px; ???????height: 300px; ???????border: 1px solid; ???} ???.item{ ???????width: 100px; ???????height: 100px; ???????line-height: 100px; ???????text-align: center; ???????background-color: #fb3; ???????transform: scale(-1.2); ???????-ms-transform: scale(-1.2); ???????-moz-transform: scale(-1.2); ???????-webkit-transform: scale(-1.2); ???}效果图：
图中可看出，元素相对于x轴发生了反转，但是缩放效果并没有受影响。
skew 斜切
对象进行2D空间斜切。常与 transform-origin 一起使用。
使用规则：
skew(): 第一个参数对应X轴[必须], 第二个参数对应Y轴[当不设置时, 默认为0];;skewX(): 指定X轴的斜切;skewY(): 指定Y轴的斜切;综合应用
- 平行四边形
- 梯形
- 菱形
- 折角
平行四边形
原理：使用skew斜切来实现。
先看效果图：
看到效果图，最先想到的是对元素使用skew斜切效果。
简单使用斜切代码：
???dom结构：<div class="btn">Home</div>
???样式设计：.btn{ ???????width: 150px; ???????height: 40px; ???????text-align: center; ???????line-height: 40px; ???????background-color: #fb3; ???????transform: skew(-45deg); ???????-moz-transform: skew(-45deg); ???????-ms-transform: skew(-45deg); ???????-webkit-transform: skew(-45deg); ???}确实实现了平行四边形的效果，但是里面的内容也被斜切了，并不完美。
下面介绍两种方向来实现平行四边形，且内容不会受影响。
第一种是比较常见的，嵌套一层结构，父元素进行斜切，子元素抵消掉斜切。
代码：
???dom结构：?<div class=".box"> ???????<div class="btn">home</div> ????</div>
???样式设计：.box{ ???????width: 150px; ???????height: 40px; ???????text-align: center; ???????line-height: 40px; ???????background-color: #fb3; ???????transform: skew(-45deg); ???????-moz-transform: skew(-45deg); ???????-ms-transform: skew(-45deg); ???????-webkit-transform: skew(-45deg); ???} ???.btn{ ???????transform: skew(45deg); ???????-moz-transform: skew(45deg); ???????-ms-transform: skew(45deg); ???????-webkit-transform: skew(45deg); ????}第二种方法是使用伪元素，将斜切背景应用在伪元素上。
代码：
???dom结构：<div class="btn">home</div>
???样式设计： .btn{ ???????position: relative; ???????width: 150px; ???????height: 40px; ???????text-align: center; ???????line-height: 40px; ???} ???.btn:after{ ???????position:absolute; ???????content: ‘‘; ???????width: 100%; ???????height: 100%; ???????top: 0; ???????left: 0; ???????background-color: #fb3; ???????z-index: -1; /* 保证背景不会覆盖住文字 */ ???????transform: skew(-45deg); ???????-moz-transform: skew(-45deg); ???????-ms-transform: skew(-45deg); ???????-webkit-transform: skew(-45deg); ????}梯形
梯形的实现相对平行四边形来说要复杂一些，需要借助perspective()透视来实现。
先看效果图：
代码：
???dom结构：<div class="box">home</div>
???基本样式.box { ???????position: relative; ???????width: 200px; ???????height: 60px; ???????margin: 50px; ???????line-height: 60px; ???????text-align: center; ???}下面来说明一下如何实现梯形效果：
和平行四边形的原理一样，梯形的背景仍要写在伪元素上，以防止字体变形。
代码如下：
.box:after { ???????position: absolute; ???????content: ‘‘; ???????top: 0; ???????left: 0; ???????right: 0; ???????bottom: 0; ???????z-index: -1; ???????background-color: #fb3; ???????transform: perspective(20px) rotatex(5deg); ???????-moz-transform: perspective(20px) rotatex(5deg); ???????-ms-transform: perspective(20px) rotatex(5deg); ???????-webkit-transform: perspective(20px) rotatex(5deg); ???} ?为更好的查看效果，可以给box加上半透明的背景，效果图：
旋转是以元素的中心线进行旋转的，所以要修改一下旋转原点，增加以下代码：
transform-origin: bottom; ???－moz-transform-origin: bottom; ???-ms-transform-origin: bottom; ???-webkit-transform-origin: bottom;
在看效果图：
这时可以发现，元素的高度已经严重缩水了，这时候可以使用scale进行y轴的缩放，修改transform代码如下：
???transform: perspective(20px) rotatex(5deg) scaley(1.3); ???－moz-transform-origin: perspective(20px) rotatex(5deg) scaley(1.3); ???-ms-transform-origin: perspective(20px) rotatex(5deg) scaley(1.3); ???-webkit-transform-origin: perspective(20px) rotatex(5deg) scaley(1.3);效果：
当然也可以利用修改transform-origin的值实现不同的梯形。
代码如下[别忘记兼容性，加上浏览器前缀]：
???右侧直角 ???transform-origin: right; ???transform: perspective(20px) rotatex(5deg); ???左侧直角 ???transform-origin: left; ???transform: perspective(20px) rotatex(5deg);菱形
菱形的实现有两种，第一种是有rotate结合scale实现，第二种是用clip-path实现。
首先对父级进行旋转 代码：
???dom结构 ???<div class="box"> ???????<img src=""> ???</div> ???基本样式设计： .box{ ???????width: 200px; ???????height: 200px; ???????border: 1px solid; ???????overflow: hidden; ???????transform: rotate(45deg); ???????-mos-transform: rotate(45deg); ???????-mz-transform: rotate(45deg); ???????-webkit-transform: rotate(45deg); ???} ???.box img{ ???????width: 100%; ???}效果图：
现在可以加上scale属性了，更改transform属性为：
???transform: rotate(-45deg) scale(1.41);但是这个方法有限制，每次必须要计算scale放大的比例，并且当图片不是正方形时，就没办法实现较好的菱形效果。
第二种方案，使用clip-path实现。不需要嵌套任何元素。
???clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);效果图：
折角效果
如果是规则的折角图案，如下图所示，可直接用background实现，详情可见文章背景应用
[代码就不过多说明了]代码示例：
???dom结构 ???<div class="box"></div> ???基本样式 ???.box { ???????width: 200px; ???????height: 200px; ???????background-color: #58a; /*hack 回退*/ ???????background: linear-gradient(225deg, transparent 20px, rgba(0, 0, 0, .7) 0), linear-gradient(225deg, transparent 20px, yellowgreen 0); ???????background-size: 28px, 100%; ???????background-repeat: no-repeat; ???????background-position: right top, center; ???}不同角度的折角实现：
效果图：
代码：
???.box{ ???????position: relative; ???????background-color: #58a; /*hack 回退*/ ???????background: linear-gradient(-150deg, transparent 30px, yellowgreen 0); ???} ???.box:before { ???????position: absolute; ???????content: ‘‘; ???????width: 62px; ???????height: 34px; ???????top: 0; ???????right: 0; ???????background: linear-gradient(-30deg, transparent 30px, rgba(0, 0, 0, .7) 0); ???????transform: rotate(-120deg); ???}仍需要借助渐变色实现背景，然后旋转。
也可以进行更多的优化，如阴影，圆角，效果图如下：
CSS3 transform属性
原文地址：https://www.cnblogs.com/minghui007/p/8178423.html