CSS3新增2d和3d属性

2019-06-25 本文已影响0人小唱同学

一、过渡

过渡的属性写在本身的元素上,鼠标放上去有过渡效果,滑离的时候也有过渡效果

过渡的属性写在:hover 里,只有划过的时候有过渡效果.

transition-property:

参与过渡的属性 ,可以写多个,中间用逗号隔开,所有属性都参与过渡写all,可以省略不写(不写默认是all)

transition-duration: (必须写)

参与过渡的时间,可以写多个,中间用逗号隔开,时间的值要和参与过渡的属性值一一对应

单位:s ms 1000ms=1s 0.5s=.5s

transition-timing-function:

过渡的速度变化曲线

默认值是:ease

https://cubic-bezier.com/可以到这个地址里自己设置速度的变化

使用的是贝塞尔曲线

可以写多个值,中间用逗号隔开,和参与过渡的属性值一一对应

transition-delay 过渡的延时时间, 可以写多个值,中间用逗号隔开

和参与过渡的属性值一一对应

单位:s ms 1000ms=1s 0.5s=.5s

复合写法:

transition: all 1s linear 2s;

其中过渡的时间是不可以省略的

过渡参与属性省略:默认是all

速度变化曲线省略:ease

延时省略:0

注意顺序前面的时间是过渡时间,后面的时间是延时时间

transition: width 1s linear 2s,height 3s linear 1s;

多个的时候用逗号隔开

二、元素的转换

1. 平移

transform: translate(x轴的位置,y轴的位置);

transform: translate(x轴的位置);

transform: translateX(x轴的位置);

transform: translateY(Y轴的位置);

正值:向右向下

负值:向左向上

不会影响页面中其他元素的位置

2. 旋转

transform: rotate(旋转的角度);

单位:deg

正值:顺时针

负值:逆时针

backface-visibility:hidden 不是正面面对屏幕就隐藏

3. 缩放

transform: scale(x轴缩放的倍数,y轴缩放的倍数);

transform: scale(x和y轴同时缩放的倍数);

transform: scale(负值);先翻转再缩放

transform: scaleX(x轴缩放的倍数);

transform: scaleY(Y轴缩放的倍数);

4. 倾斜

transform: skew(x轴倾斜的角度,y轴倾斜的角度);

transform: skew(x轴倾斜的角度);

transform: skewX(x轴倾斜的角度);

transform: skewY(Y轴倾斜的角度);

5. 基准点

transform-origin:x轴的位置,y轴的位置;

transform-origin:一个值的时候,这个值表示x轴的位置(y轴的位置默认是center)

单位: px %

Left right top…

6. 3d旋转

transform: rotateX(旋转角度);沿着x轴进行旋转

transform: rotateY(旋转角度);沿着Y轴进行旋转

transform: rotateZ(旋转角度);沿着Z轴进行旋转

transform: rotateX(20deg) rotateY(30deg) rotateZ(45deg);

transform: rotate3d(1,0,0,30deg);

(x,y,z,角度)xyz只的是方向,使用这种办法可以开启移动端的硬件加速

7. perspective 景深

可以让子元素有近大远小的效果,舒服的距离是500到1000.

8. 3d平移

transform: translateZ();沿着z轴平移

transform: translatex(100px) translateY(200px) translateZ(300px);

transform: translate3d(200px,300px,400px)

9. 复合写法:属性值中间用空格隔开,先后顺序会影响效果

transform: rotate(45deg) scale(2) translate(100px,200px) skew(30deg)

transform:translate(100px,200px) rotate(45deg) scale(2) skew(30deg);

10.

transform-style: preserve-3d; 让子元素保留其3d的位置

三、动画

animation-name: change; 动画的名字(必须写)

animation-duration: 4s; 动画的持续时间(必须写)

animation-timing-function: linear; 速度变化曲线

animation-delay: 1s; 动画延时(第一次)

animation-iteration-count: infinite;

动画的次数infinite无限循环

animation-direction: alternate;

是否反向运动

@keyframes 动画的名字{

0%{}

10%{}

…

100%{}

}

可以写from to

animation-fill-mode:

animation-play-state: 设置动画播放或暂停

paused;暂停

running播放

.box div{

width: 100px;

height: 100px;

background: tomato;

animation: change 4s linear 1s infinite alternate;

animation-play-state: paused;

}

.box:hover div{

animation-play-state: running;

}