一、Z轴平移
z轴平移，调整元素在z轴的位置，正常情况下调整元素和人眼之间的距离，距离越大，元素离人越近，z轴平移属于立体效果（近大远小），默认情况下网页不支持透视，如果需要看到效果，必须要设置网页的视距
1:设置视距
—perspective [pə'spektiv] 设置当前网页的视距为800px，人眼距离网页的距离，一般不小于600px
—设置方式一
html{ perspective: 800px; }
—设置方式二：
—perspective(800px) 谷歌要直接设置在transform里面
选择器{/*perspective(800px) 谷歌要直接设置在transform里面 */
transform: perspective(800px) translateZ(100px);}
2:代码演示
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>/* perspective [pə'spektiv] 设置当前网页的视距为800px，人眼距离网页的距离，一般不小于600px *//* html{perspective: 800px; } */body {border: 1px solid red;}.box1 {width: 200px;height: 200px;background-color: #bfa;margin: 100px auto;transition: 1s;}body:hover .box1 {/*perspective(800px) 谷歌要直接设置在transform里面 */transform: perspective(800px) translateZ(100px);}</style></head><body><div class="box1"></div></body></html>
二、旋转
1:旋转
通过旋转可以使元素沿着x y或者z旋转指定的角度
—条件：需要提前设置视距
—语法：transform: rotateY() ;
—可选值
rotateX() 沿着x轴旋转
rotateY() 沿着y轴旋转
rotateZ() 沿着z轴旋转
—参数：deg 度 turn 圈
— backface-visibility: ; 设置是否显示元素的背面
可选值：visible 默认值，显示
hidden 不显示
2:代码演示如下
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 设置当前网页的视距为800px，人眼距离网页的距离，一般不小于600px *//* html{perspective: 800px;} */.box1{width: 200px;height: 200px;background-color: #bfa;margin: 100px auto;transition: 2s;}body:hover .box1{transform: perspective(800px) rotateY(-45deg) ;backface-visibility: hidden; }</style></head><body><div class="box1"></div></body></html>
三、缩放
1:缩放
transform: ; [skeil]对元素进行缩放的函数
—可选值
scale（）双方向缩放
scaleX() x轴方向缩放
scaleY() y方向缩放
—变形的原点 默认值center，可通过transform-origin:;改变原点
参数：数值1 数值2
2、代码演示
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width: 100px;height: 100px;background-color: #bfa;margin: 0 auto;margin-top: 100px;transition: 2s;}.box1:hover{/* 变形的原点 默认值center */transform-origin: 0px 0px;transform:scale(2)}/* 需求：设置图片放大效果 */.img-wrapper{width: 200px;height: 200px;border: 1px red solid;overflow: hidden;}.img-wrapper:hover img{transform: scale(1.2);}img{transition: all 1s;}</style></head><body><div class="box1"></div><div class="img-wrapper"><img src="./1.jpeg" alt=""></div></body></html>
