目录
一、变型
1、使用方式
--通过transform的translate设置盒子的偏移量
2、注意
(1)单位通常为像素
(2)变型不会影响其它元素,类似于脱离文档流
二、z轴透视
1、使用前提
(1)给html标签设置perspective
(2)单独使用z轴一般给body设置perspective
(3)视距(perspective)一般是800px-1200px左右
2、原理
--z轴是相对于屏幕而言,可以简单理解为元素的层级高度,z轴正偏移量越大,在屏幕中显示效果就会越大,反之亦然
三、缩放
1、使用方式
--通过transform,scale()进行缩放
--可以通过数字增加倍数,比如2或者0.5
2、原理
--对某个轴进行拉长或者缩短,注意是对轴,所以一般如果对Z轴缩放没什么效果
四、旋转
1、坐标轴
--在浏览器中,横向为x轴,纵向为y轴,屏幕对着我们则是z轴
2、使用方法
(1)旋转必须有视距
(2)通过rotate设置相对于哪个轴旋转,单位多为角度(deg),也可以轮数(turn)
五、代码(不太好理解的点可以参考例子理解)
1、变型
<!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>变型</title>
<style>
body {
background-color: silver;
}
div{
background-color: white;
height: 200px;
width: 200px;
float: left;
margin: 0 20px;
transition: transform 0.3s;
}
.box3{
margin-top: 250px;
background-color: black;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.box1:hover,
.box2:hover {
transform: translateY(-2px);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
2、z轴透视
<!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>z轴变型(透视效果)</title>
<style>
body {
perspective: 1000px;
}
.box1 {
margin: 200px auto;
height: 100px;
width: 100px;
background-color: #bfa;
transition: all 2s;
}
.box1:hover{
transform: translateZ(400px);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
3、旋转
<!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>旋转</title>
<style>
@keyframes test {
from {
}
to {
transform: rotateX(180deg);
}
}
html {
perspective: 200px;
}
.box {
margin: 200px auto;
height: 100px;
width: 100px;
background-color: #bfa;
animation-name: test;
animation-iteration-count: infinite;
animation-duration: 2s;
animation-direction: alternate;
/* 不显示背面,默认为visibility,显示 */
backface-visibility: hidden;
}
.box1 {
width: 100px;
height: 50px;
background-color: red;
}
.box2 {
width: 100px;
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
4、缩放
<!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>缩放</title>
<style>
html {
perspective: 1000px;
}
.box {
width: 100px;
height: 100px;
border: 1px solid red;
margin: 100px auto;
overflow: hidden;
}
img {
transition: 2s;
}
.box:hover img {
transform: scale(2);
}
</style>
</head>
<body>
<div class="box">
<img src="../src/img_exercise/1.png" alt="" />
</div>
</body>
</html>