一、过渡属性
过渡属性介绍：
css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值
注意点：
过渡效果对display:none;和display:blok;不起作用
语法：
过渡属性分写形式：
transition-property：检索或设置对象中的参与过渡的属性
transition-duration：检索或设置对象过渡的持续时间
transition-delay：检索或设置对象延迟过渡的时间
transition-timing-function：检索或设置对象中过渡的动画类型
简写：
transition:all(全部或所有)/具体属性值 运动时间s/ms 延迟时间s/ms 动画类型;
动画类型示例图:
代码示例:
二、2D属性
transform 该属性允许我们对元素进行旋转、缩放、移动。
位移语法:
1、translate()
将元素向指定的方向移动，类似于position中的relative。
如：transform: translate(100px, 0px);
第一个参数:水平方向
第二个参数:垂直方向
缩放属性语法:
2、scale()
让元素根据中心原点对对象进行缩放。默认的值1。因此0.01到0.99之间的任何值，使一个元素缩小；而任何大于或等于1.01的值，让元素显得更大。
如：transform: scale(0.5, 0.5);
第一个参数:水平方向
第二个参数:垂直方向
注意点:
如果取值是1, 代表不变
如果取值大于1, 代表需要放大
如果取值小于1, 代表需要缩小
如果水平和垂直缩放都一样, 那么可以简写为一个参数
transform: scale(1.5);
缩放使用如下：
旋转语法：
3、rotate()
旋转rotate()通过指定的角度参数对元素根据对象原点指定一个2D旋转。它主要在二维空间内进行操作，接受一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。
注意点:
1.如果需要进行多个转换, 那么用空格隔开
2.2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的 如：transform: rotate(45deg);
translate(100px, 0px) scale(1.5, 1.5);
rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转
rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转
rotateZ() 方法，元素围绕其 Z轴以给定的度数进行旋转，默认就是Z轴旋转。
旋转和景深使用如下：
变形原点：
transform-origin: top left;
控制2d效果的产生位置
变形原点使用如下：
景深属性语法:
perspective: 数值；透视属性：近大远小
注意点：一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面
三、translate3d
1)什么是3d的场景呢？
2d场景，在屏幕上水平和垂直的交叉线x轴和y轴
3d场景，在垂直于屏幕的方法，相对于2d多出个z轴
Z轴：靠近屏幕的方向是正向，远离屏幕的方向是反向
下图为3d场景坐标图
2)transform-style属性
ransform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。
他主要有两个属性值：flat和preserve-3d
translate3d位移属性
3D位移
CSS3中的3D位移主要包括:
translateZ()
translate3d(值1，值2，值3)两个功能函数；
值1：代表横向坐标位移向量的长度；
值2：代表纵向坐标位移向量的长度；
值3：代表Z轴位移向量的长度。此值不能是一个百分比值，如果取值为百分比值，将会认为无效值。
4)rotate3d旋转属性
3D旋转
CSS3中的3D旋转主要包括:
rotateX()
rotateY()
rotateZ()
rotate3d(1,1,0,4deg)四个功能函数；
4个参数，前三个，对应x,y,z 轴，是标示你是否希望沿着该轴旋转，是为1，不是为0，最后一个标示旋转的角度。
3d旋转属性使用如下：
5)scaleZ缩放属性:
CSS3中的3D缩放主要包括:
scaleZ()；
6)景深属性：
生活中的3d 区别于2d的地方
近大远小 景深
程序中实现的方法 perspective 元素距离 视线的距离（物体和眼睛的距离越小，近大远小的效果越明显）
perspective: 1200px;(加在父元素上)
transform:perspective(1200px) （在子元素中使用）
注意点：
a、两个都设置会发生冲突，建议只设置父元素，通常的数值在900-1200之间
2、如果当你的视线距离物体足够远的时候，基本上就不会有近大远小的感觉
四、斜切
transform: skewY()
精彩文章
您阅读本篇文章共花了：
发表评论