CSS3 3D转换

最新推荐文章于 2022-12-23 13:13:28 发布

一麻袋小猫

最新推荐文章于 2022-12-23 13:13:28 发布

阅读量173

点赞数

分类专栏： CSS特效文章标签： css3 html5

本文链接：https://blog.csdn.net/Zmongo/article/details/104235411

版权

CSS特效专栏收录该内容

9 篇文章 0 订阅

订阅专栏

特点

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

三维坐标系

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>

在这里插入图片描述

一麻袋小猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 3D转换

特点近大远小物体后面遮挡不可见三维坐标系x,y,z 三个值z 越往外面越大越往里面越小后面的单位一般用pxperspective透视也叫视距如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）模拟人类的视觉位置，可认为安排一只眼睛去看透视越大，距离屏幕越近，成像越大。透视越小，距离屏幕越远，成像越小透视的单位的像素透视写在被观察的元素的父亲里面**透...
复制链接

扫一扫

专栏目录