移动web-第二天

空间转换

1.Z轴的正方向为屏幕到人的眼睛的方向
2.transform:translateZ()
transform: translate3d(100px,100px,300px);

网页默认显示是2d的，看不到3d效果的

    transform: translateZ(300px);
    transform: translate3d(100px,100px,300px);

视距理解：其实就是安排了一只眼睛
1.透视，视距，景深设置给使用了3d元素的父元素（亲爸爸）
2.添加视距取值范围：400~1200px pp

     perspective: 800px;

Z轴：
/* 顺时针旋转 */

    transform: rotateZ(360deg);

/* 逆时针旋转 */

    transform: rotateZ(-360deg);

X轴：

   transform: rotateX(180deg);

/* 在立体空间中，一个点和一条线是不占位置的，你是看不到的 */

Y轴：

   transform: rotateY(90deg);

沿着多条对称轴旋转：
/* 属性值与属性值以空格隔开 */

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

1，两者写的地方相同
2，perspective仅仅是增加了一个近大远小的效果，并没有真正的开启3D
3，开启3d：transform-style: preserve-3d

动画的注意点：
1.动画的名称不能重复
2.可参与过渡的css属性都可以参与动画
3.动画的名称不能为 running
4.如果调用该动画的盒子样式和初始化的样式是一样的，初始状态可以省略不写