## 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多出几个变换函数。
```
- 1、相关介绍
- 1.1.关于全栈学科
- 1.2.全栈工程师与全栈开发
- 1.3.基本技能
- 1.4.学习方法
- 2、html初步
- 2.1.什么是网页和网站
- 2.2.网页浏览原理
- 2.3.什么是html
- 2.4.html基本知识
- 2.5.综合案例
- 3、html结构标签
- 3.1.文档级结构标签
- 3.2.内容级结构标签
- 3.3.块标签和行内标签
- 4、html文本标签
- 5、html列表标签
- 5.1.无序列表ul>li
- 5.2.有序列表ol>li
- 5.3.定义列表dl>dt,dd
- 6、html图像标签
- 6.1.网页路径问题
- 7、html链接标签
- 7.1.超链接
- 7.2.锚链接
- 7.3.link标签
- 8、html表格标签
- 8.1.表格初步
- 8.2.表格高级
- 8.3.表格案例
- 9、html表单标签
- 9.1.表单初步
- 9.2.表单标签详解
- 9.3.表单和表格综合案例
- 10、html5新增标签与属性
- 10.1.一些新增标签
- 10.2.一些新增input类型
- 10.3.一些新增属性
- 11、其他零碎及相关知识
- 11.1.meta标签(元信息标签)
- 11.2.网页的字符编码问题
- 11.3.特殊字符——字符实体
- 11.4.文档类型(了解)
- 11.5.内嵌框架标签iframe(了解)
- 12、CSS的引入
- 12.1.CSS引入
- 12.2.什么是css?
- 12.3.为什么需要css?
- 13、css入门
- 13.1.css样式分类(根据css代码位置分)
- 13.2.css基本语法
- 13.3.css简单的选择器
- 13.4.css属性
- 13.5.css入门综合案例
- 14、选择器详解
- 14.1.选择器综述
- 14.2.基础选择器
- 14.3.关系选择器
- 14.4.属性选择器
- 14.5.伪类选择器
- 14.6.伪元素选择器
- 14.7.常见选择器的组合
- 14.8.css样式的特性
- 15、有关文字的属性
- 15.1.字体属性
- 15.2.文本属性
- 16、有关盒子的属性
- 16.1.盒子概述
- 16.2.盒子的宽高属性width和height
- 16.3.边框属性border
- 16.4.内边距属性padding
- 16.5.外边距属性margin
- 16.6.背景属性background
- 16.7.轮廓属性outline
- 16.8.盒子综合案例
- 17、有关布局的属性
- 17.1.布局属性
- 17.2.页面布局应用
- 18、定位属性
- 19、列表与表格样式
- 19.1.列表样式
- 19.2.表格样式
- 20、CSS3高级特性
- 20.1.盒子新特性
- 20.2.多栏布局column
- 20.3.弹性布局flex
- 20.4.2D变换transform(2D)
- 20.5.3D变换transform(3D)
- 20.6.过渡效果transition
- 20.7.动画效果animation
- 21、零碎或补遗或经验
- 21.1.光标形状设置cursor
- 21.2.盒子缩放zoom
- 21.3.文字阴影text-shadow
- 21.4.文字溢出text-overflow
- 21.5.盒子模型box-sizing
- 21.6.css初始化
- 21.7.css精灵技术
- 21.8.自定义字体