什么是透视
我们写的css2D都是平面效果,无法做到立体的效果,如果想要做立体的效果,我们就需要z轴,直接添加z轴是没有效果的,需要在元素的父级元素上添加透视效果。
一个简单的透视代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
perspective: 1000px;
}
div {
width: 200px;
height: 200px;
background-color: skyblue;
margin: 100px auto;
transform: translateZ(100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
透视的特点:
- 透视需要加在元素的父级元素上
- 透视的单位是像素,像素越大,物体越小,像素越小,物体越大。
- z轴越大,物体大小会变大,z轴越小,物体也会变小,z轴为负数时,物体会小于本身的大小。
3D旋转rotate
3D旋转最大的特点就是可以沿着x轴y轴或z轴旋转,也可以按着自定义的轴旋转。
transform:rotateX(180deg) 沿着x轴旋转180度
transform:rotateY(180deg) 沿着y轴旋转180度
transform:rotateZ(180deg) 沿着z轴旋转180deg
transform:rotate3d(x,y,z,deg) 沿着自定义轴,旋转多少度
让转换后的子元素保留 3D 转换:
属性 | 作用 |
---|---|
transform-style | 让转换后的子元素保留 3D 转换,默认为flat不转换,preserve-3d开启转换 |