今日学习内容：2D转换之位移、旋转（包括旋转原点的设置）、缩放、倾斜；3D转换之位移、旋转、缩放、倾斜。
总结如下要点：
（一）2D转换
（若想看到变换效果，要给图形的盒子设置过渡 transition: 3s）
1.位移
语法 => transform: translate(x,y);
其中x表示水平方向的位移（即左右），y表示垂直方向的位移（即上下）。
括号内最多只能有2个值，当只有1个值的时候表示水平位移。
值的大小可以为正数，也可以为负数。当值为负数的时候向反方向移动。
值的单位可以为像素（如100px，-100px），也可以为百分比（如50%，-50%）。当值用百分比来表示的时候，参照的是元素translate所在盒子的大小。
translate属性不脱标！
2.旋转
语法 => transform：rotate();
括号内表示旋转的角度，必须使用单位deg。
当括号内的值为正数时，表示顺时针旋转；为负数时，表示逆时针旋转。
3.旋转原点的设置
语法 => transform-origin: x y;
其中x表示水平方向，值可以设置为方位值left，center，right；或者像素px；或者百分数%。
y表示垂直方向，值可以设置为方位值top，center，bottom；或者像素px；或者百分数%。
当x或y的值为负数时，旋转原点在盒子之外。
默认旋转原点为所在盒子的中心点：center center。（x和y之间用空格隔开。）
代码举栗：
<!-- 当鼠标进入path盒子时，风火轮自动向右转动；鼠标移出时风火轮复原 -->
<body>
<div class="path">
<div class="wheel"> 风火轮 </div>
</div>
</body>
<style>
/* 此处省略path及风火轮样式，设置鼠标进入盒子时的样式 */
.path:hover .wheel {
/* translate()中只有一个值，表示水平移动，上下不动 */
/* rotate()中设置为3600度表示转动十圈 */
transform: translate(1000px) rotate(3600deg);
}
如上所示。如果既要发生位移又要发生旋转，必须在同一个transform内同时设置多个属性，用空格隔开，不能分开写成两个transform，因为分开写成两个后会使样式发生重叠，展示最后定义的transform。
4.缩放
语法 => transform: scale(x,y);
其中x表示水平方向（改变图形的宽度），y表示垂直方向（改变图形的高度）。当括号内只有一个值的时候，图形的宽和高同步变换。
括号里的值为数字：（值的正负不会影响图形变换）
1）值=0时，图形消失；
2）0<值<1时，图形缩小为原来的几倍；
3）值=1时，图形不变；
4）值>1时，图形放大为原来的几倍；
5.倾斜
语法 => transform: skew(x,y);
其中x表示左右倾斜（左边和右边），上下两条边保持水平（常用）。y表示上下倾斜（上边和下边），左右两条边保持垂直。只有一个值的时候默认为左右倾斜。
值的单位为deg，表示倾斜度数。如60deg。
如果想要盒子内部的某些内容不倾斜，需要单独设置：给字内容加标签，然后设置transform: skew()内的值为负的父标签的值。（如果给字内容加的标签为行内元素如span，需要用display: block或display: inline-block转换成块级元素或行内块元素。）
代码举栗：
<!-- 用图形倾斜代替添加背景图片可以加快加载速度 -->
<body>
<ul>
<li> <a href="#"> <span>首页</span> </a> </li> <li>
<!-- 此处省略7个 li>a>span -->
</ul>
</body>
<style>
/* 省略ul和a标签的css样式设置 */
li {
float: left;
background: black;
margin-right: 20px;
transform: skew(-20deg);
}
li a span {
display: block;
transform: skew(20deg);
}
</style>
6.盒子居中的方法总结
盒子居中要用到“子绝父相”。即子元素设置 position: absolute; 父元素设置 position: relative; 然后设置left、top、margin等值：
1）left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
2）lef: 50%;
top: 50%;
margin-left: -自身宽度一半;
margin-top: -自身宽度一半;
3）left: 50%;
top: 50%;
transform: translate(-50%, -50%);
（二）3D转换
3D坐标系
1.位移
语法 => transform: translateX() translateY() translateZ();
增加了Z轴属性 transform: translateZ();
括号内的值为正数时，表示离我越来越近，图形变大；值为负数时，表示离我越来越远，图形变小。简称近大远小。
近大远小
添加translateZ属性后，如果想要看到效果，需要给添加了transform: translateZ()属性的元素的上级元素（不一定就是父盒子）加透视 perspective: 600px; （perspective值一般为600px～1000px）。
添加透视的目的是为了看到近大远小的效果。
2.旋转
语法 => transform：rotateX(20deg) rotateY(20deg) rotateZ(20deg);
需要添加透视、过渡属性来看到效果。
3D旋转图解
如图，箭头的指向即为要设置为正值的方向。
代码举栗：
<!-- 简单的前后两面立方体旋转 -->
<body>
<!-- 外层的盒子 -->
<div class="box">
<!-- 真正产生效果的盒子 -->
<div>前</div>
<div>后</div>
</div>
</body>
<style>
body {
perspective: 600px; /* 给上级元素设置透视才能看到效果 */
}
/* 外层父盒子，代表完整的立体空间 */
.box {
width: 200px;
height: 200px;
/* border: 1px solid; */ /* 不想展示出旋转轴就把boder去掉 */
margin: 200px auto;
position: relative;
transition: 3s; /* 设置过渡 */
transform-style: preserve-3d; /* 设置3D空间 告诉浏览器3d还是2d*/
}
/* 前后两个盒子共同属性 */
.box div {
width: 200px;
height: 200px;
position: absolute;
}
/* 前红 */
.box div:nth-child(1){
background: red;
z-index: 1; /* 层叠级次低被blue覆盖，加z-index。默认为0 */
transform: translateZ(100px);
}
/* 后蓝 */
.box div:nth-child(2){
background: blue;
transform: translateZ(-100px) rotateY(180deg);
}
.box:hover {
transform: rotateY(180deg); /* 鼠标移入父盒子时父盒子转动 */
}
如上。3D立方体一定要有一个父盒子包裹起来才能使用（代码中的.box）。
只有给父盒子标记为3d盒子，添加 transform-style: preserve-3d;才能有效果。（代码第22行）
translateZ()表示前后，前后在哪里与盒子当时的正面方向有关。
如代码 transform: translateZ(-100px) rotateY(180deg); 中，先旋转再位移与先位移再旋转得到的效果不同，因为参照轴是不一样的。
3.缩放
语法 => transform: scaleX() 或 scaleY() 或 scaleZ();
scaleX()和scaleY()于2D变换一样。scaleZ()改变的是立方体的厚度（前后的距离），只在3D空间下才有效。
4.倾斜
语法 => transform: skewX(度数deg) 或 skewY(度数deg);
skewX和skewY可以分成两个transform来写。
3D变换中Z没有倾斜属性。
网友评论