2D 变形(变换)
使用
transform属性可以对元素进行旋转、缩放、平移、倾斜
旋转
使用 transform:rotate() 属性来设置元素的旋转
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
background-color: deeppink;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid;
transition: 2s;
}
.box:hover {
transform: rotate(360deg) ;
}
</style>
<body>
<div class="box"></div>
</body>
运行结果
缩放
transform:scale() 属性值可以来设置元素缩放的比例。
参数：
- 设置一个值
单一的数值即指定了一个缩放系数，同时作用于X轴和Y轴让该元素进行缩放
比 1 大时，元素放大，比 1 小时，元素缩小 - 设置两个长度/百分比值
两个数值即分别指定了2D比例的X轴和Y轴的缩放系数，相当于指定了两个值的scale()（2D缩放）函数。
/* 元素放大 */
transform:scale(2);
/* 元素缩小 */
transform:scale(0.5);
/* X轴放大,Y轴缩小 */
transform: scale(1.5, 0.5);
倾斜
使用 transform:skew() 可以设置元素倾斜，skewX() 表示按X轴方向倾斜，skewY() 表示按Y轴方向倾斜，单位可以使用deg
参数：
一个参数，默认和skewX() 相同
设置2个参数，可以同时按X轴和Y轴的方向倾斜
/* 一个参数默认按X轴方向倾斜 */
transform:skew(30deg);
/* 表示按Y轴方向倾斜 */
transform:skewY(30deg);
/* 设置两个参数时，按照两个轴(x,y)的方向倾斜 */
transform:skew(30deg,30deg);
平移
使用transform:translate() 属性可以操作元素平移，默认是 x轴(水平方向)上的平移。
设置一个参数，默认和 translateX() 相同
/* 修改 tramsform 的属性值为 translate() */
transform: translate(100px);
运行结果
使用translateY()可以设置元素在Y轴(垂直方向)上的平移
transform:translateY(50px);
transform:translate(x,y) 也可以设置两个值，指的是向两个方向同时平移
transform:translateY(50px,50px);
基点变换
首先，元素的 旋转、缩放、倾斜 默认都是按照 基点(默认为元素的中心点) 来变换的
可以通过transform-origin属性来改变基点的位置
transform-origin属性可以使用一个，两个或三个值来指定，其中每个值都表示一个偏移量。 没有明确定义的偏移将重置为其对应的初始值。- 如果定义了两个或更多值并且没有值的关键字，或者唯一使用的关键字是center，则第一个值表示水平偏移量，第二个值表示垂直偏移量。
<style>
* {
margin: 0;
padding: 0;
}
/* 禁用系统滚动条 */
html,
body {
height: 100%;
overflow: hidden;
}
.box {
width: 150px;
height: 150px;
background-color: pink;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid;
transition: 1s;
}
/* 设置一个伪元素，用来模拟基点 */
.box::after {
content: "";
display: block;
position: absolute;
left: 10px;
top: 10px;
width: 10px;
height: 10px;
background-color: gray;
border-radius: 50%;
}
.box:hover {
transform: rotate(90deg);
/* 改变基点 */
transform-origin: 10px 10px;
}
</style>
<body>
<div class="box"></div>
</body>
/* 表示左上角 */
transform-origin: left top;
/* 表示左下角 */
transform-origin: left bottom;
/* 表示左边居中的位置 */
transform-origin: left center;
/* 表示右上角 */
transform-origin: right top;
/* 表示右下角 */
transform-origin: right bottom;
/* 表示右边居中的位置 */
transform-origin: right center;
变换组合
变换组合就是将多个变换组合到一起，例如transform:rotate(90deg) scale(0.5); 表示元素旋转90度，然后缩小，旋转和缩小是同时完成的。
/* 旋转和缩放组合时不会影响元素的位置，所以组合的时候顺序可以改变 */
transform:rotate(90deg) scale(0.5);
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
overflow: hidden;
}
.box {
width: 600px;
height: 300px;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid;
transition: 1s;
}
.inner1,
.inner2 {
width: 80px;
height: 80px;
background-color: deeppink;
margin: 50px 0;
transition: 1s;
}
.box:hover .inner1 {
/* 移动在前边 */
transform: translate(100px) scale(1.5);
}
.box:hover .inner2 {
/* 缩放在前边 */
transform: scale(1.5) translate(100px);
}
</style>
<body>
<div class="box">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
</body>
注意：变换组合时，计算方向是从右往左进行计算的。变换的底层其实就是矩阵的运算。
3D 变形(变换)
3D 旋转
transform: rotate3d(x,y,z,deg);
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 400px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin: -200px 0 0 -200px;
border: 1px solid;
/* 景深 */
perspective: 200px;
}
.content {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
border: 1px solid;
border-radius: 50%;
background-color: deeppink;
font: 50px/200px "宋体";
text-align: center;
transition: 5s;
}
.box:hover .content {
transform: rotate3d(1, 1, 1, 360deg);
}
</style>
<body>
<div class="box">
<div class="content">
圆滚滚
</div>
</div>
</body>
3D 平移
transform: translate3d(x,y,z); X轴和Y轴可以设置百分比，Z轴必须是具体的值
transform: translate3d(100%,100%,10px);
3D 缩放
三个长度/百分比值
三个数值即分别指定了3D比例的X轴、Y轴和Z轴的缩放系数. 相当于一个scale3d()函数。
transform: scale3d(x,y,z);
transform: scale3d(0.5,0.5,0.5);
虽然效果不明显，但它确实是三个维度上的缩放
景深和其他属性
简单的理解，景深就是我们肉眼距离显示器的这段距离，景深越大，元素离我们就越远，效果就不好。
在 CSS3 中， 通过 perspective 属性来激活一个 3D 空间，属性值就是景深的大小（默认值为 none 无景深）
让 3D 场景有 近大远小 的效果 (我们肉眼距离屏幕的距离)
景深是一个不可继承属性，但它可以作用于后代元素(不是作用于本身的)
景深的原理:
- 景深越大，灭点越远，元素变形更小
- 景深越小，灭点越近，元素变形更大
景深基点 控制视角的位置
perspective-origin:left,top; 默认值为 50% 50% 参照与盒模型。
注意：一定要避免景深叠加问题
transform-style: preserve-3d;
营造有层级的 3D 舞台
是一个不可继承属性，他作用于子元素
backface-visibility: hidden;
用来设置是否显示元素的背面，默认是显示的
3D 案例
3D立方体
<style>
* {
padding: 0;
margin: 0;
}
#wrap {
position: absolute;
top: 50%;
left: 50%;
margin: -200px -200px;
width: 400px;
height: 400px;
border: 2px solid;
perspective: 500px; /* 设置景深 */
}
#wrap>.box {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px -50px;
transition: 5s;
/* 搭建3d舞台 */
transform-style: preserve-3d;
transform-origin: center center -50px;
}
/* 设置所有面的公共样式 */
#wrap>.box>div {
position: absolute;
width: 100px;
height: 100px;
background-color: rgba(123, 121, 133, .5);
font: 50px/100px "微软雅黑";
text-align: center;
/* 设置隐藏元素的背面 */
backface-visibility: hidden;
}
/* 下 */
#wrap>.box>div:nth-child(5) {
top: -100px;
transform-origin: bottom;
transform: rotateX(90deg);
}
/* 上 */
#wrap>.box>div:nth-child(6) {
bottom: -100px;
transform-origin: top;
transform: rotateX(-90deg);
}
/* 设置第四个面 "右" */
#wrap>.box>div:nth-child(4) {
right: -100px;
transform-origin: left;
transform: rotateY(90deg);
}
/* 设置第三个面 "左" */
#wrap>.box>div:nth-child(3) {
left: -100px;
transform-origin: right;
transform: rotateY(-90deg);
}
/* 设置第二个面 "后" */
#wrap>.box>div:nth-child(2) {
transform: translateZ(-100px) rotateX(180deg);
}
/* 设置第一个面 "前" */
#wrap>.box>div:nth-child(1) {
z-index: 1;
}
#wrap:hover .box {
transform: rotateX(360deg);
}
</style>
<body>
<div id="wrap">
<div class="box">
<div>前</div>
<div>后</div>
<div>左</div>
<div>右</div>
<div>上</div>
<div>下</div>
</div>
</div>
</body>
