一、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>