空间转换/动画

阅读目录

• rotateY
• 鼠标经过暂停动画
• 多组动画

一，空间转换3D

3D坐标系：3D坐标系比2D多了一个Z轴

一定要记住3个坐标取值的正反：

X轴往右越大，是正值，否则反之

Y轴往下越大，是正值，否则反之

Z轴（指向我们）越大，是正值，否则反之

3D位移：

有完整写法：

taansform:translate3d(x,y,z);

只不过在很多情况下，我们喜欢分开写：

transform:translateX(100px);
transform:translateY(100px);
transform:translateZ(100px);

 透视

透视的作用：空间转换时，为元素添加近大远小，近实远虚的视觉效果

语法：

perspective:800px

 

透视注意事项：

1.取值范围经常在800PX~1200px之间。

2.一定给父级添加

3.透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

 

3D旋转

有了透视的加持，我们3D旋转效果会比较明显。

rotateX

类似单杠旋转

注意：默认的旋转中心在盒子的中心位置。

 

body{
/*父级添加透视*/
    perspective:400px;
}

img{
     transition:all 1s;   
}
img:hover{
    tranform:rotateX(360deg);
}

 

 

 

 

回到顶部

rotateY

 

类似钢管舞

?

1 2 3 4 5 6 7 8 9 10

body{     perspective:400px; } img {     transition: all 1s; }   img:hover {     transform: rotateY(360deg); }

　　

左手法则

一定要搞清楚X轴和Y轴如何旋转的，旋转的度数是正值还是负值。

规则：

1.大拇指指向X轴正向方（右），则四指指向的方向是旋转的方向

2.大拇指指向Y轴正向方（下），则四指指向的方向是旋转的方向

立体呈现

让子盒子在父盒子内有空间的展示，此时可以给父亲添加

transform-style；presrrve-3d;

 

 

二、动画（重点）

动画最大的特点可以不用鼠标触发，自动的，反复的执行某些动画。

动画使用分为定义和调用：

1.定义：

/*1.定义的动画*/
@keyframes dance{
    from {
    transform：scale(1)
}

to {
    transform:scale(1.5)
}
}

或者是

 /* 1. 定义的动画 */
    @keyframes dance {

       0% {
        transform: scale(1)
      } 

      100% {
        transform: scale(1.5)
      }
    }

2.调用

img{
width:200px;
  /* 2. 使用动画  animation: 动画名称 执行时间;   infinite 循环*/
    animation: dance .5s infinite;
}

动画属性

1.动画名字参照css类选择器命名

2.动画时长和延迟时间别忘了带单位S

3.infinate 无限循环动画

4.alternate 为反向 就是左右来回执行动画（跑马灯）

5.forwards 动画结束停留在最后一帧状态

6.linear 让动画匀速执行

 

回到顶部

鼠标经过暂停动画

/*鼠标经过box，则ul停止动画*/
.box:hover ul{
        animation-play-state:paused;
}

回到顶部

多组动画

/*我们想要2个动画一起执行 animation: 动画1，动画2，..动画n*/
animation: run 1s steps(12) infinite,move 5s linear forwards;