- A+
1.transform 2D转换
transform的属性通过函数进行定义，2D函数包括：translate()、scale()、rotate()、skew()
书写格式：transform: 函数名（X，Y）
可以同时定义多个函数，函数之间通过“空格”隔开
transform-origin 用于设置转换元素的基点位置（包括Z轴）
2.translate(Xpx,Ypx) 转换，通过设定参数，从当前元素位置沿着X轴和Y轴移动，允许一个值（X轴移动）
参数允许负值，默认左上角为（0,0）坐标，X为负值向左移动，Y为负值向上移动
<html> <head> <meta charset="utf-8"> <title>CSStransform</title> <style> .trans{ width: 200px; height: 400px; background-color: orangered; margin: 100px auto; } .trans:hover{ transform: translate(5px,-5px); box-shadow: 3px 3px 5px 2px #9f9f9f; } </style> </head> <body> <div class="trans"></div> </body> </html>
3.rotate(deg) 旋转，元素顺时针旋转设定的角度，参数为负值时，元素将逆时针旋转
参数值只有一个，单位为 deg
<html> <head> <meta charset="utf-8"> <title>CSS_transform</title> <style> .trans{ width: 200px; height: 400px; background-color: orangered; margin: 100px auto; } .trans:hover{ box-shadow: 3px 3px 5px 2px #9f9f9f; transform: rotate(60deg) translate(5px,-5px); } </style> </head> <body> <div class="trans"></div> </body> </html>
4.scale(m,n)缩放，通过设置参数值将原始尺寸缩放m/n倍，m值代表宽，n值代表高，允许一个值
默认值为1，0~1表示缩小，大于1表示放大
.trans:hover{ box-shadow: 3px 3px 5px 2px #9f9f9f; transform: rotate(60deg) translate(5px,-5px) scale(0.5); }
5.skew(Xdeg,Ydeg)元素的倾斜角度，沿水平（X轴）和垂直（Y轴）翻转元素
允许一个值，表示水平轴的角度
.trans:hover{ /*transform: rotate(60deg) translate(5px,-5px) scale(1.2,0.5);*/ box-shadow: 3px 3px 5px 2px #9f9f9f; transform: skew(-30deg,80deg); }
6.transform3D转换
常用函数有：translate（）、scale（）、rot（），没有skew()函数
在2D的基础上增加 Z轴参数设置，即 translate(X,Y,Z)、scale(X,Y,Z)、rot(X,Y,Z)，也可以分别设置XYZ参数
实现3D效果，父元素需要设置 perspective属性，定义元素被查看位置的视图效果（距离），当父元素定义了 perspective属性时，其子元素会获得透视效果，而非父元素本身
perspective-origin(X轴值,Y轴值)，用于定义3D元素的基点位置（可不设置），默认值为（50% 50%），类似perspective属性其设置对子元素生效
perspective 既可以单独作为属性使用（书写格式 perspective: 300px），也可以作为 transform的属性函数使用（书写格式 transform: perspective(300px)）
7.translate3d(x,y,z) 3D效果
<html> <head> <meta charset="utf-8"> <title>CSS_transform</title> <style> .trans{ width: 500px; height: 500px; margin: 100px auto; background-color: #787772; perspective: 300px; } .son{ width: 500px; height: 500px; margin: 100px auto; background-color: #ef4222; transition: all 8s; } .son:hover{ transform: translate3d(200px,-200px,-800px); } </style> </head> <body> <div class="trans"> <div class="son"></div> </div> </body> </html>
8.scale3d(x,y,z) 3D效果
<html> <head> <meta charset="utf-8"> <title>CSS_transform</title> <style> .trans{ width: 500px; height: 500px; margin: 100px auto; background-color: #787772; perspective: 500px; } .son{ width: 500px; height: 500px; margin: 100px auto; background-color: #ef4222; transition: all 5s; transform: scale(0.2) } .son:hover{ transform:scale3d(0.5,0.9,1.7); /*Z轴转换效果不明显*/ } </style> </head> <body> <div class="trans"> <div class="son"></div> </div> </body> </html>
9.rotate3d(x,y,z) 3D效果
<html> <head> <meta charset="utf-8"> <title>CSS_transform</title> <style> .trans{ width: 500px; height: 500px; margin: 100px auto; background-color: #787772; perspective: 500px; } .son{ width: 500px; height: 200px; transition: all 5s; background: linear-gradient(45deg,yellowgreen,#ef4222); } .son:hover{ transform:scale3d(0.5,2,5) rotatez(180deg) ; } </style> </head> <body> <div class="trans"> <div class="son"></div> </div> </body> </html>
10.transition过渡，通过该属性使元素从一种样式逐渐变为另一种样式的效果
过渡属性包括：
transition-property（需要应用过渡的CSS属性名称）、transition-duration（过渡效果持续的时间，默认0s）、transition-timing-function（过渡效果的时间曲线）、transition-delay（过渡效果何时开始，默认0s）
transition-property属性值：none（无）、all（全部）、property name（具体名称），可同时过渡多个属性，属性之间使用“逗号”隔开
transition-timing-function属性值：
linear，规定开始至结束以相同速度的过渡效果（匀速）
ease，默认值，规定慢速开始、然后变快、再慢速结束的过渡效果（先快后慢）
ease-in，规定以慢速开始的过渡效果（加速）
ease-out，规定以慢速结束的过渡效果（减速）
ease-in-out，规定以慢速开始和结束的过渡效果（先加速后减速）
cubic-bezier(n,n,n,n)，自定义过渡效果，n为0~1之间的数值
可设置过渡的属性：
颜色属性
取值为数值的属性
转换属性
渐变属性
阴影属性
<html> <head> <meta charset="utf-8"> <title>CSS_transform</title> <style> .trans{ width: 500px; height: 200px; margin: 100px auto; background-color: yellowgreen; transition: all 5s linear 1s; } .trans:hover{ background-color: #ef4222; } </style> </head> <body> <div class="trans"></div> </body> </html>
