3D变换
transform
之3d移动变换:
transform:translate3d(x,y,z)
/* z:代表在垂直于平面的轴上移动,电脑屏幕往人眼那个方向为正方向。
transform:translateZ(z) 【女神上来】 */
- transform-style规定变换的样式(父元素)
/* 属性值:flag平面(默认) preserve-3d保持3d变换 */
transform-style: preserve-3d /* 保持3d变换 */
-
设置观察的距离,景深
perspective : value(父元素)
【案例女神向我走来 】 -
transform 之 rotate3d
transform : rotate3d(x,y,z,角度)
此时x、y、z取值为0或1,0代表不旋转,1旋转
transform : rotateX(角度) transform : rotateY(角度) transform : rotateZ(角度)
/* 备注:左手定律,大拇指指向轴的正方向,手指弯曲的方向为旋转的正方向 【体操】 */
- 立方体
改变盒子变换的基准点transform-origin
perspective-origin
观察的基准点(角度)
动画
- 自定义动画
(1) 通过@keyframes指定动画序列;
@keyframes{
0%{}
50%{}
70%{}
100%{}
}
(2) 通过百分比将动画序列分割成多个节点;
(3) 在各节点中分别定义各属性
(4) 通过animation属性将动画应用于相应元素;
-
animation
属性
(1)animation-name
: 动画名字(必须)(2)
animation-duration
: 动画播放时间(必须)(3)
animation-timing-function
: 动画播放的形式
属性值:linear
线性ease
ease-in
steps(n)
(4)
animation-delay
: 动画播放的延迟(5)
animation-iteration-count
: 动画播放的次数
属性值:infinite
无限次播放(6)
animation-direction
: 动画是否轮流反向播放
属性值:alternate
交替播放reverse
反向播放alternate-reverse
轮流反向简写顺序:animation : 1 2 3 4 5 6 ;
补充:
(1) animation-play-state
: paused
; 暂停动画
(2) animation-fill-mode
属性规定动画在播放之前或之后,其动画效果是否可见。
属性值:forwards
当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)