CSS3 3D转换

最新推荐文章于 2025-01-17 17:27:01 发布

原创最新推荐文章于 2025-01-17 17:27:01 发布 · 228 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #html5

CSS特效专栏收录该内容

9 篇文章

订阅专栏

特点

近大远小
物体后面遮挡不可见

三维坐标系

x,y,z 三个值
x 越往右越大越往左越小
y 越往下越大，越往上越小
z 越往外面越大越往里面越小后面的单位一般用px
在这里插入图片描述

perspective透视也叫视距

如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）
模拟人类的视觉位置，可认为安排一只眼睛去看
透视越大，距离屏幕越近，成像越大。透视越小，距离屏幕越远，成像越小
透视的单位的像素

透视写在被观察的元素的父亲里面
**透视越小，物体越大。
如果想要网页有3D效果，必须得加透视

translateZ

z轴，物体距离屏幕的距离，z轴越大，我们看到的物体越大。
给父亲一个perspective，给盒子们不同的z,会实现不同的效果

3D旋转（遵循左手法则，大拇指为坐标轴，四个手指弯曲的方向为图片翻转的方向）

X轴：正值向后翻转负值向前翻转
transform: rotate3d(x,y,z,deg);
transform:rotate3d(1,0,0,45deg);

img:hover {
transform: rotate3d(1,1,0,180deg);
}
当存在多个1时，用矢量法。
类似下图：
在这里插入图片描述

3D呈现 transform-style

控制子元素是否开启三维立体环境
transform-style: preserve-3d；
代码写给父级，但是影响的是子盒子

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	body {
		perspective: 500px;
	}
		.box {
			position: relative;
			width: 200px;
			height: 200px;
			margin: 100px auto;
			/*开启3D空间*/
			transform-style: preserve-3d;

		}
		.box:hover {
			transform: rotateY(60deg);
		}
		.box div {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: pink;
		}
		.box div:last-child {
			background-color: purple;
			transform: rotateX(60deg);
		}
	</style>
</head>
<body>
	<div class="box">
		<div></div>
		<div></div>
	</div>
</body>
</html>