移动Web第二天

web移动端第二天

移动Web第二天

一、空间转换

1.transform:translate3d(x,y,z)空间位移

transform: translateX(值);x轴往左是负值,往右是正值

transform: translateY(值);y轴往上是负值,往下是正值

transform: translateZ(值);朝向自己的是正值,与自己相反的方向是负值.

z轴默认无法观察远近效果,需要添加perspective来实现透视[近大远小,近实远虚]的效果.

perspective:值    perspective的值一般在800-1200左右.

2.transform:totate3d(x,y,z)空间旋转

transform: rotateX(值);正值是从上往下转,负值是从下往上转

transform: rotateY(值);正值是从左往右转,负值是从右往左转

transform: rotateZ(值); 正值顺时针转圈,负值逆时针转圈.

*左手法则

判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

3.立体呈现

呈现立体图形步骤

1. 盒子父元素添加transform-style: preserve-3d；

2. 按需求设置子盒子的位置（位移或旋转）

注意

 空间内，转换元素都有自已独立的坐标轴，互不干扰

4.空间缩放

transform: scaleX(倍数);

transform: scaleY(倍数);

transform: scaleZ(倍数);

transform: scale3d(x, y, z);

二、动画[重点]

动画可以实现多个状态之间的变化过程,过程是可以控制的.过渡只能实现两个状态之间的变化过程.

在调用动画之前,需要使用@keyframes 动画名{ }来自定义动画,最后用animation调用动画名即可实现动画的效果了

.box img{
            width: 200px;
            animation: move 2s;
        }
        @keyframes move {
            from{
                transform: translate(0px,0px);
            }
            to{
                transform: translate(500px,0px);
            }
        }

也可以使用百分比代替from和to来替代动画的状态,为动画添加多个状态.

animation的相关属性执行动画过程: