![fb2fc720dafe725fa05ababe4337e77b.png](https://i-blog.csdnimg.cn/blog_migrate/ef0495a8b7c385b6c66515edf6e3cf70.jpeg)
哈喽大家好,我是作者“未来”,本期分享的内容是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%);/*走的自己的一半*/
![922124ecfc71e91e435cc26abfeb2f71.png](https://i-blog.csdnimg.cn/blog_migrate/1ebd081d7ce605e2dcfc4090018c397a.jpeg)
2 设置变形中心点
transform-origin可以调整元素转换变形的原点
如果是4个角,可以用 left top这些,如果想要精确的位置,可以用px像素。
![a5ea012995568e2e7d7e0918ab476143.png](https://i-blog.csdnimg.cn/blog_migrate/2a04febdf8059d2268770b27b4366140.jpeg)
3 旋转的楚乔传
![8869811166a97b5517cbcd79ac76e9e5.png](https://i-blog.csdnimg.cn/blog_migrate/b55c729f14d0de46dfaff65b2003ce8e.jpeg)
![3414e94f7edbae9d23348ceab92b8e1b.png](https://i-blog.csdnimg.cn/blog_migrate/8209dd21f4ab6fdfeb2b49bd4b65a858.jpeg)
4 左手法则
3D变形(CSS3) transform
左手坐标系伸出左手,让拇指和食指成形,大拇指向右,食指向上,中指指向前方。这样我们就建立了一个左手坐标系,拇指、食指和中指分别代表X、 Y、z轴的正方向。如下图
![a2aa13da1e2ec69fbc9055509a1df9ea.png](https://i-blog.csdnimg.cn/blog_migrate/137ca0ddeab320fe41d015fe771cd3da.jpeg)
CSS3中的3D坐标系与上述的3D坐标系是有一定区别的,相当于其绕着X轴旋转了180°,如下图
![3126e436a44879f79c8d870a8bba854f.png](https://i-blog.csdnimg.cn/blog_migrate/4e22cde8848fda48e75c5eac98e9ed40.jpeg)
简单记住他们的坐标:
X坐标是负的,右边是正的
y上面是负的,下面是正的
z里面是负的,外面是正的
5 ratateXYZ
RotateX() 就是沿着x立体旋转
RotateY() 就是沿着Y立体旋转
RotateZ() 就是沿着Z立体旋转
6 体会透视(perspective)
电脑显示屏是一个2D平面,图像之所以具有立体感(3D效果),其实只是一种视觉呈现,通过透视可以实现此目的。
透视可以将一个2D平面,在转换的过程当中,呈现3D效果。
透视原理:近大远小。
浏览器透视:把近大远小的所有图像,透视在屏幕上。
perspective:视距,表示视点距离屏幕的长短。视点,用于模拟透视效果时人眼的位置
![2c83ff6f28a99ab2f9eb7906489bbd6b.png](https://i-blog.csdnimg.cn/blog_migrate/5eac24dd5b882a0d1e8f6ad40ea20fa6.jpeg)
注:并非任何情况下需要透视效果,根据开发需要进行设置。
perspective一般作为一个属性,设置给父元素,作用于所有3D转换的子元素理解透视距离原理:
![a851c57af5d9210e55073016c9990782.png](https://i-blog.csdnimg.cn/blog_migrate/566073f942c64fee417c3b97d9eacff1.jpeg)
7 translate3d
transform:translate3d(x, y, z)
X和y可以是px可以是% z只能是px
8 开门大吉上
![aa01b493948c6b5adbebc73e3ef9154d.png](https://i-blog.csdnimg.cn/blog_migrate/c259465758bfb8ff5ddaa8ac629adba8.jpeg)
![4bcb26e5a2f1bc0a17a49c7dce8dd33c.png](https://i-blog.csdnimg.cn/blog_migrate/f94a12743f0d7eadfcde2a4263b87634.jpeg)
9 开门大吉下
![9d704d13bef4d08b26eb320ca7ea5b34.png](https://i-blog.csdnimg.cn/blog_migrate/d64f08d0b558f9a801ede4f9302a0f60.jpeg)
![1ee937a8391d4c4681dbbe2485c43b0b.png](https://i-blog.csdnimg.cn/blog_migrate/7971f9f0d2f342f6e7630d9b0e5e0e81.jpeg)
10 翻转的图片上
![54468e9d3852ef2a96855273e066502b.png](https://i-blog.csdnimg.cn/blog_migrate/992928e2e558ac949415564dbcd6ae9c.jpeg)
![f9ec63e5b12bf75a8b6bdfa1bc05fddd.png](https://i-blog.csdnimg.cn/blog_migrate/bf3d410877244c1a37a2a4139e37f40e.jpeg)
z-index:1 表示将下面的图放在上面,如果有多张图叠加在一起,数值越大越在上面。
11 翻转的图片下
backface-visibility
属性定义 当元素不面向屏幕时是否可见。
![4ac4852f397f31a709de76a224087932.png](https://i-blog.csdnimg.cn/blog_migrate/8b8d45d9c882819b3f23345f0650ace9.jpeg)
12 体会动画animation
动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。
语法格式:
animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;
下面的表格列出了@ keyframes规则和所有动画属性:
![e8dbe2b8e2a94334f054cd392ac9870f.png](https://i-blog.csdnimg.cn/blog_migrate/79ebebdfd29a119710e183f6174e3e8c.jpeg)
![52e1b302904291094c253caca87e8820.png](https://i-blog.csdnimg.cn/blog_migrate/aeebdae2076d8c8a8c10db87f9a5b886.jpeg)
关于几个值,除了名字,动画时间,延时有严格顺序要求其它随意r
13 多组动画
![a0f72745ae0b6c704a0af8f1877b7525.png](https://i-blog.csdnimg.cn/blog_migrate/2795367149f1c933ff59b912531fd73a.jpeg)
14 奔跑的小车
![e3d09eb234cea519e8b7ff3a17663a5a.png](https://i-blog.csdnimg.cn/blog_migrate/96db6ad2312828c55811943c5a59c863.jpeg)
![efec1c67416d73e153a1726bda96cc35.png](https://i-blog.csdnimg.cn/blog_migrate/fb3ad475cd368d5e88b537d462a89599.jpeg)
15 无缝滚动上
![6ce12e29d353856aa29cf6344092c492.png](https://i-blog.csdnimg.cn/blog_migrate/6a2e9394c988f4a2d9ec37fffe2d8743.jpeg)
16 无缝滚动下
![10c11b4d98fa8756ddaeb62ad84f46d4.png](https://i-blog.csdnimg.cn/blog_migrate/ccc8f549f69e92f61b94001c3cc8575d.jpeg)
![a7c313c834c9e56b056ad88f5b6b1b0a.png](https://i-blog.csdnimg.cn/blog_migrate/e381ff2ceb92553eef707c65b561550b.jpeg)
两组一样的画水平连接在一起来实现滚动效果
看不懂的小伙伴不要气馁,后续的分享中将持续解释,只要你跟着我分享的课程从头到尾去学习,每篇文章看三遍,一个月后,回过头来看之前的文章就会感觉简单极了。
本章已结束,下篇文章将分享《22 CSS3伸缩布局及应用》小伙伴们不要错过哟!