多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
## 20.5.1.基本概念 3D变换是在2D变换的基础上,再加上一个维度(z轴),构成了三维空间。 新加上的这个z轴,是跟网页页面(电脑屏幕)垂直的那个方向,也就是眼睛到屏幕的“垂直线”。 z轴的正方向是从屏幕到眼睛的方向,如下图所示: ![](https://img.kancloud.cn/e7/5c/e75c4139ede18ed3a758cdca188e4179_421x250.png) 这就相当于将网页元素(一个矩形的平面)置于3D空间中,并对其实行某种变换。 ## 20.5.2.主要属性 3D变换仍然还使用2D变换的2个属性(transform和transform-origin),不过在transform的属性值中,又增加了若干变换函数,以达到在3D空间中将盒子进行某种变换操作的目的。 另外,对于3D变换,还会多出来几个属性,分别用于设定3D变换场景下所需要的一些特征信息。 3D变换的主要属性有: * transform-style: 用于设定元素变换的方式(2D还是3D),默认是flat(平面,也就是2D); 设置为preserve-3d,就可以实现3D变换。 注意:该属性应该设置在变换元素的父级元素上。 * perspective: 透视距离,用于设定观察3D视图时眼睛离屏幕(也就是z=0)的距离,即观察点的远近。 默认透视距离是“无穷大”,即最远处。 注意:该属性应该设置在变换元素的上级元素上。 * perspective-origin: 透视点,即观察3D视图时眼睛的位置,也就是眼睛直对屏幕的那个点在(x,y)坐标系上的坐标值。 默认为(center,center),也就是父元素的中心点。 注意:该属性应该设置在变换元素的上级素上。 * transform-orgin 含义跟2D变换一样,用于指定元素变换时的“原点”(基点); * transform 含义跟2D变换一样,只是多了一些有关3D变换的变换函数,主要有: translateX(x), translateY(y), translateZ(z), translate3d(x, y, z): 移动变换 rotateX(x角度), rotateY(y角度), rotateZ(z角度), rotate3d(x, y, z, deg):旋转变换;其旋转规则为: 左手“抓住”某轴,大拇指指向该轴正方向,则正值会沿其余手指的方向旋转,否则相反; rotate3d中,x,y,z是数值,是相对大小,deg才是角度。 scaleX(x), scaleY(y), scaleZ(z), scale3d(x, y, z):缩放变换 ## 20.5.3.案例 制作一个“美女大围墙”,大致如下所示: (注意:是若干张图片所围成的一个3D效果的贴图墙效果) ![](https://img.kancloud.cn/48/1f/481f97dcbb5132c6a7ea19db17e95331_777x422.png) ``` <style> .box{ border:solid 1px red; width: 800px; height:500px; margin:10px auto ; padding-top:50px; } .box>.pic{ border:solid 2px blue; width:200px; height:300px; position:relative; margin:0 auto; perspective: 1000px; perspective-origin:center -100px; transform-style:preserve-3d; } .box>.pic>img{ width:200px; height:300px; position:absolute; left:0; } .box>.pic>img:nth-child(1){ transform:rotatey(0deg) translatez(300px); } .box>.pic>img:nth-child(2){ transform:rotatey(40deg) translatez(300px); } .box>.pic>img:nth-child(3){ transform:rotatey(80deg) translatez(300px); } .box>.pic>img:nth-child(4){ transform:rotatey(120deg) translatez(300px); } .box>.pic>img:nth-child(5){ transform:rotatey(160deg) translatez(300px); } .box>.pic>img:nth-child(6){ transform:rotatey(200deg) translatez(300px); } .box>.pic>img:nth-child(7){ transform:rotatey(240deg) translatez(300px); } .box>.pic>img:nth-child(8){ transform:rotatey(280deg) translatez(300px); } .box>.pic>img:nth-child(9){ transform:rotatey(320deg) translatez(300px); } </style> </head> <body> <div class="box"> <div class="pic"> <img src="images/girl1.jpg" alt=""> <img src="images/girl2.jpg" alt=""> <img src="images/girl3.jpg" alt=""> <img src="images/girl4.jpg" alt=""> <img src="images/girl5.jpg" alt=""> <img src="images/girl6.jpg" alt=""> <img src="images/girl7.jpg" alt=""> <img src="images/girl8.jpg" alt=""> <img src="images/girl9.jpg" alt=""> </div> </div> ``` 当天回顾: 多栏布局: ``` column-width: column-count: column-gap:设置间隙 column-rule:间隔线 ``` 弹性布局: ``` display:flex flex-direction: row, row-reverse, column, column-reverse flex-wrap: nowrap, wrap, wrap-reverse justify-content: flex-start, flex-end, center, space-between, space-around align-content: flex-start, flex-end, center, space-between, space-around align-items: flex-start, flex-end, center,baseline, stretch ``` 2D变换: ``` transform: 位移变形:translatex(), translatey(), tranlatez(), translate3d(x,y,z) rotatex, rotatey, rotatez(), rotate3d() scalex(), scaley(), scalez(), scale3d() skewx(), skewy(), skew(x角度, y角度) transform-origin:设置变换原点 perspective:设置视点离屏幕的距离 perspective-origin:视点在屏幕上的坐标(相对于变换盒子的父盒子) transform-style: flat, preserve-3d ``` day6到此结束 ## 多栏布局: ``` 对盒子中的以文本为主的内容实行自动的多栏效果呈现。 其核心属性是:column-count, column-width 间隙宽度:column-gap 间隔线: column-rule ``` ## 弹性布局: ``` 就是实现一个盒子中的子盒子的横向多列,以及纵向多行的布局效果。 核心属性:diaplay:flex flex-direction:设定方向 flex-wrap:设定换行 justify-content:解决一行内中的子盒子在主轴的排布问题 flex-start, flex-end, center, space-between, space-around align-content:解决纵向(辅轴)上多行的排布问题 flex-start, flex-end, center, space-between, space-around align-items: 解决的是一行中的子盒子在辅轴上的排布问题。 ``` ## 2D变换: ``` transform: 位移变换:translatex(), translatey(), translate(x,y); //长度值 旋转:rotate(角度) 缩放:scalex(), scaley(), scale(x, y) //比例值 拉伸:skewx(), skewy(), skew(x角度, y角度); 角度值 transform-origin:设定变换的原点。 ``` ## 3D变换: ``` transform-style:preserve-3d; perspective:距离; //设定观察举例 perspective-origin:x,y坐标; //设定观察点,是一个x,y平面的点。 transform多出几个变换函数。 ```