1.2D,3D转换
2D
- translate(位移)
transform: translate(100px,100px);
- rotate(旋转)
transform: rotate(275deg);
- scale(缩放)
transform: scale(1,2);//一个参数时表示同时缩放该倍率
- skew(斜拉:绕X轴旋转,绕Y轴旋转)
transform: skew(10deg,0deg);//一个参数时表示绕X轴旋转
3D
- rotateX()
- rotateY()
设置中心点位置
transform-origin: top left;//center,或是直接写坐标点px px
适配浏览器
.div2{
-webkit-transform: translate(100px,100px); /* safari chrome*/
-moz-transform: translate(200px,100px); /* firefox */
-ms-transform: translate(100px,100px);/* IE,360的内核也是IE */
-o-transform: translate(100px,100px); /* opera */
transform: translate(100px,100px);/* 不是所有浏览器都支持 */
}
matrix(a,b,c,d,e,f)
是所有变换的基础
教程上的解释:
- translate(x,y)=matrix(1,0,0,1,x,y)
- rotate(θ)=matrix(cosθ,sinθ,-sinθ,cosθ,0,0 )
- scale(x,y)=matrix(x,0,0,y,0,0)
- skew(θx,θy)=matrix(1,tan(θy),tan(θx),1,0,0)
2.过渡
元素从一个样式转变成另一个样式
2.1要素:动画效果的CSS,动画执行时间
2.2属性:transition设置四个过渡属性
transition-property名称
transition-duration时长
transition-timing-function时间曲线
transition-delay开始的时间
3.动画
需要遵循@keyframes规则
规定动画时长,动画名称
自定义动画效果:
示例:
.div8{
width: 100px;
height: 100px;
background: coral;
position: relative;
-webkit-animation: anim 5s infinite;
animation: anim 5s infinite;
}
@keyframes anim { /*走正方形*/
0%{background: coral;left: 0;top: 0}
25%{background: cadetblue;left: 200px;top: 0}
50%{background: cornflowerblue;left: 200px;top: 200px}
75%{background: cornsilk;left: 0; top: 200px}
100%{background: coral;left: 0;top: 0}
}
@-webkit-keyframes anim {
0%{background: coral;left: 0;top: 0}
25%{background: cadetblue;left: 200px;top: 0}
50%{background: cornflowerblue;left: 200px;top: 200px}
75%{background: cornsilk;left: 0; top: 200px}
100%{background: coral;left: 0;top: 0}
}