2D特效
1. 平移
- 格式：transform: translateX(300px) translateY(400px);
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D特效</title>
<style>
div{
width: 200px;
height: 200px;
background: red;
/*平移*/
transform: translateX(300px) translateY(400px);
/*平移简写*/
/*transform: translate(300px,400px);*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
2. 旋转
- 格式：transform: rotateX(45deg) rotateY(45deg);
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D特效</title>
<style>
div{
width: 200px;
height: 200px;
background: red;
/*旋转*/
transform: rotateX(45deg) rotateY(45deg) rotateZ(0deg);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
3. 缩放
- 格式：transform: scaleX(1) scaleY(2);
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D特效</title>
<style>
div{
width: 200px;
height: 200px;
background: red;
/*缩放：缩放倍数，可以为负值*/
transform: scaleX(1) scaleY(2);
/*缩放简写*/
/*transform: scale(1);*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
4. 倾斜
- 格式：transform: skewX(-45deg) skewY(0deg);
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D特效</title>
<style>
div{
width: 200px;
height: 200px;
background: red;
/*倾斜*/
transform: skewX(-45deg) skewY(0deg);
}
</style>
</head>
<body>
<div>
鲁家宝鲁家宝鲁家宝鲁家宝
</div>
</body>
</html>
3D
-
perspective：定义视图距离（perspective:100px;），Z轴的移动不能超过视图的距离，perspective 属性只影响 3D 转换元素
-
让子元素保留3D属性，其父元素必须有该行代码transform-style: preserve-3d;
-
平移，旋转，缩放，倾斜同2D相似，多了一个Z轴
