css3 animation 位置移动了怎么不占位置_CSS3新增2D和3D属性及应

哈喽大家好，我是作者“未来”，本期分享的内容是Web前端系列课程，本系列总共29个阶段，坚持学习3个月蜕变为Web前端高手哦！

志同道合的小伙伴跟我一起学习交流哦！

第二阶段 CSS3

21 CSS3新增2D和3D属性及应

1 定位的盒子居中对齐完美写法

使用 translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。

可以改变元素的位置，x、y可为负值；

translate(x,y)水平方向和垂直方向同时移动(也就是x轴和y轴同时移动)

translate(x)仅水平方向移动(x轴移动)

translateR(Y)仅垂直方向移动(Y轴移动)

transform:translate(-50%，-50%)；/*走的自己的一半*/

2 设置变形中心点

transform-origin可以调整元素转换变形的原点

如果是4个角，可以用 left top这些，如果想要精确的位置，可以用px像素。

3 旋转的楚乔传

4 左手法则

3D变形(CSS3) transform

左手坐标系伸出左手，让拇指和食指成形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、 Y、z轴的正方向。如下图

CSS3中的3D坐标系与上述的3D坐标系是有一定区别的，相当于其绕着X轴旋转了180°，如下图

简单记住他们的坐标：

X坐标是负的，右边是正的

y上面是负的，下面是正的

z里面是负的，外面是正的

5 ratateXYZ

RotateX() 就是沿着x立体旋转

RotateY() 就是沿着Y立体旋转

RotateZ() 就是沿着Z立体旋转

6 体会透视(perspective)

电脑显示屏是一个2D平面，图像之所以具有立体感(3D效果)，其实只是一种视觉呈现，通过透视可以实现此目的。

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。

透视原理：近大远小。

浏览器透视：把近大远小的所有图像，透视在屏幕上。

perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置

注：并非任何情况下需要透视效果，根据开发需要进行设置。

perspective一般作为一个属性，设置给父元素，作用于所有3D转换的子元素理解透视距离原理：

7 translate3d

transform:translate3d(x, y, z)

X和y可以是px可以是% z只能是px

8 开门大吉上

9 开门大吉下

10 翻转的图片上

z-index：1 表示将下面的图放在上面，如果有多张图叠加在一起，数值越大越在上面。

11 翻转的图片下

backface-visibility

属性定义 当元素不面向屏幕时是否可见。

12 体会动画animation

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

语法格式：

animation：动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向；

下面的表格列出了@ keyframes规则和所有动画属性：

关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意r

13 多组动画

14 奔跑的小车

15 无缝滚动上

16 无缝滚动下

两组一样的画水平连接在一起来实现滚动效果

看不懂的小伙伴不要气馁，后续的分享中将持续解释，只要你跟着我分享的课程从头到尾去学习，每篇文章看三遍，一个月后，回过头来看之前的文章就会感觉简单极了。

本章已结束，下篇文章将分享《22 CSS3伸缩布局及应用》小伙伴们不要错过哟！