一.过渡
transition:过渡是css3中具有颠覆性的特征之一,可以实现元素不同状态间的平滑过渡(补间动画).
必须有两个不同的状态
1.补间动画和帧动画
帧动画:通过一帧一帧的画面按照固定顺序和速度播放
补间动画:补间动画只需要起始状态和终止状态,浏览器自动完成中间的过渡
2.过渡的属性
1. transtion-property:设置过渡属性; 如: transition-property:all; transition-property:width;
2. transtion-dyration:设置过渡时间; 如: transition-duration:1s ;
3. transtion-delay:设置过渡延迟时间; 如: transition-delay:2s; // 2s后开始执行动画
4. transtion-timing:设置过渡速度; 如: linear , ease , ease-in , ease-out , ease-in-out , steps(10);
3.属性合写
属性 时间 延迟 速度
transition : width 1s 3s linear, height 3s 1s ease;多个属性用逗号隔开,可以省略后两个
二.2D转换
transform转换,2D转换,元素在平面上实现移动,旋转,缩放,斜切等操作
1.scale缩放
transform:scaleX( 0.5 ); //让宽度变化为原来的0.5倍
transform:scaleY( 0.5 ); //让高度变化为原来的0.5倍,不能写多个,会被覆盖
transform:scale( 0.5 ); // 让宽度和高度同时变化
注意: scale 接收的值是倍数,因此没有单位
scale 可以是一个值,如果是一个值宽高都会等比例缩放
可以通过transforn-origin设定旋转原点
2.translate平移
transform:translateX(100px);
transform:translateY(100px);
transform:translate(100px,100px);
transform:translate(50%,50%);
注意: translate的值可以是px,也可以是百分比,百分比对照的是自身的宽高
translate移动的元素并不会影响其他盒子,类似于相对定位
3.rotate 旋转
transform:rotate( 360deg ); // 旋转360度
transform:rotate( -360deg ); // 逆时针旋转360度
注意 : 单位是deg,角度,不是px
正值顺时针转,负值逆时针转
可以通过transform-prigin设定旋转原点
转换原点写在A状态,不在B状态
4.skew斜切(平行四边形)
一般x,y只会倾斜一个
在水平方向倾斜: transform: skewX(30deg);
在垂直方向倾斜: transform: skewY(30deg);
5.transform-origin转换原点
transform-origin:center center; 水平中间,垂直中间转换
transform-origin: 40px 40px;
6.转换合写问题
transform : translateX(800px) scale(1.5) rotate(360deg);
1 . transform属性只能写一个,如果写多了会被覆盖,
2 . transform属性可以连写,但是顺序对效果有影响,在第一个执行的基础上执行第二个(通常把totate放后面)
3 . 如果对transform进行过度的时候,初次状态和结束状态一一对应
三. 3D转换
transform:不仅可以2D转换,还可以进行3D转换,
1. 坐标轴
xyz三个维度,三条轴相互垂直,Y轴是向下的
2. totate 旋转
transform :rotate(45deg); // 元素在平面2D中旋转
transform :rotateX(45deg); // 元素沿x轴旋转45度
transform :rotateY(45deg); // 元素沿y轴旋转45度
transform :rotateZ(45deg); // 元素沿z轴旋转45度
3. translate 平移
沿着x轴 y轴 z轴的正方向移动45px
transform : translateX(45px),translateY(45px) , translateZ(45px);
4,perspective 透视
可以实现近大远小的效果,透视设置的是用户眼睛和屏幕距离,
透视值,越小效果越明显,透视需要设置给变化元素父盒子
又是的3D效果仅仅只是在视觉上呈现,本质并不是立体的空间
5.ransform-style 2D还是3D的设置
transform-dtyle: flat;默认值, 2d显示
ransform-style : perserve-3d;3d显示
transform-style和perspective的区别:
透视只是相当于设置一个距离,辅助我们查看3D效果的工具
perspective-3d: 给父盒子添加,让子元素保留3d的位置,是真的3d
注意: 3D变换中旋转,对着正方向去看,正值都是顺时针,负值时逆时针
6. backface-visibility 背面是否可见
指定元素背面面向用户是是否可见
visible:指定元素背面可见,允许显示正面的镜像
hidden : 指定元素背面不可见
注意 : 只有在3d情况下,background-visibility才会生效
