移动web基础二,css3新增标签

一、空间转换 3D

3D坐标系

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

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

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

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

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

3D位移

有完整写法：

 transform: translate3d(x, y, z);

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

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

透视

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

语法:

 perspective: 800px;

透视注意事项：

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

2. 一定给父亲添加

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

   • 其中 d 为透视的距离,透视的值越大盒子小,越小盒子越大,translateZ跟他相反值越大盒子缩放越大

   • z 是 translateZ 的距离， 这个距离靠近我们，盒子越大

   

    

3D旋转

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

rotateX

类似单杠旋转。

 

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

 body {
     /* 父级添加透视 */
     perspective: 400px;
}
​
img {
    transition: all 1s;
}
​
img:hover {
    transform: rotateX(360deg);
}

rotateY

类似钢管舞。

 

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

左手法则

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

效果如下：

 

利用左手法则来判断轴向的正反转向的方法,左手模拟握着旋转轴,大拇指朝向旋转轴的正数方向,四指弯曲的方向就是旋转轴旋转的正数方向

规则：

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

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

立体呈现

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

transform-style: preserve-3d;

二、动画（重点）

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

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

1. 定义动画：

   @keyframes声明一个动画 animation调用动画(动画名称,持续时间)

   1turn等于360度,动画的过程可用百分比来控制0%-100%,百分比相对于时间

   • 声明动画@keyframes move

   • 调用动画animation:move

   2.定义动画的两种写法:

   

    

   from为起始帧,to为结束帧

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;

小结

1. transition 和 animation的区别

   • transition: 属性 花费时间 速度曲线 延时时间;

     • transition: width 2s ease 1s;   

   • animation: 动画名称 花费时间 速度曲线 延时时间 重复次数 动画方向 执行完毕的状态;

   • 过渡经常配合鼠标经过使用，只能设置起始和结束状态。

   • 动画可以自动执行，而且无限循环等。（其中 动画名称和花费时间必须要写）

2. perspective 和 transform-style 区别

   • perspective 是透视，可以让电脑模拟 3d效果， 实现近大远小的效果。

   • transform-style 立体呈现 可以让 子元素 里面按照设置位移，旋转，缩放，扭曲等。如果不给父元素这个属性，这里面所有的子盒子都是平面的。

   • 正常情况下： 爷爷设置perspective、父亲设置transform-style: preserve-3d、孩子们设置位移，旋转，缩放，扭曲等。

四、单词

单词	说明	实例
transform-style: preserve-3d;	加在父级身上让子盒子让盒子成为立体效果
@keyframes	声明动画	@keyframes move
animation	调用动画	animation:move
1turn	让动画转一圈,写几就转几圈
infinate	无限循环动画
alternate	为反向 就是左右来回执行动画（跑马灯）
forwards	动画结束停留在最后一帧状态
linear	让动画匀速执行