动画2及Flex弹性盒布局

一、rotate旋转的补充

三个轴不同角度的写法

transform: rotateX(30deg) rotateY(60deg) rotateZ(30deg);

旋转角度一样 简写的方法

rotate3d（x,y,z） 1和0 类似于开关的意思

第一个表示是否绕着x轴旋转 如果是 就填1 不是就填0

第二个表示是否绕着y轴旋转 如果是 就填1 不是就填0

第三个表示是否绕着z轴旋转 如果是 就填1 不是就填0

例： transform: rotate3d(1,1,1,30deg);

都是1 表示 x y z轴都旋转30度

二、animation动画补充

1.animation-fill-mode  

                            选择动画结束时候的模式 是会到原来的位置 还是回到结束的位置

                               forwards 表示会停在结束的位置

                              backwards  默认值 会返回原来的位置

2.animation-play-state

                                  paused;     里面的元素的动画播放暂停

                                  running;     默认动画是暂停的 手摸上去之后让动画开始跑

     

forwards running

backwards paused

3.两个图片的缓慢出现

第一种，给图片设置宽度

 

 第二种直接加进去，然后设置宽度