css3-----3D转换

最新推荐文章于 2023-05-19 09:11:17 发布

qq_43552118zx

最新推荐文章于 2023-05-19 09:11:17 发布

阅读量185

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/qq_43552118/article/details/84262219

版权

css3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.3D属性:(基本同2D,多了Z轴)

prespective:200px--------给父元素设置透视效果,作用于所有3D转换的子元素(值越大,转换对象就越近)

旋转rotateX() rotateY() rotateZ()

位移translateX() translateY() translateZ()

扭曲skew() skewX() skewY()

缩放scale() scaleX() scaleY()

注:旋转和位移的顺序不同,效果也不同:

<style type="text/css">
			.wrap{
				width: 200px;
				height: 200px;
				border: 1px solid black;
				margin: 100px auto;
				position: relative;
				perspective:800px;
				/*transform-style: preserve-3d;*/
				/*transform: rotateY(50deg);*/
			}
			.wrap div{
				width: 200px;
				height: 200px;
				position: absolute;
			}
			.zuo{
				background: red;
				transform-origin:left;
				/*transform: rotateY(-60deg)  translateX(200px);
				left: 40px;*/
				transform:  translateX(160px) rotateY(-60deg);
			}
			.you{
				background:green;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="you">2</div>
			<div class="zuo">1</div>
		</div>
	</body>

2,左手坐标系

伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z 轴的正方向。如图

3. 左手法则
左手握住旋转轴，竖起拇指指向旋转轴正方向，正向就是其余手指卷曲的方
向

4.CSS 中的 3D 坐标系 :CSS3 中的 3D 坐标系与上述的 3D 坐标系是有一定区别的，相当于其绕着 X 轴旋转了 180 度，如图

5.透视（perspective）

电脑显示屏是一个 2D 平面，图像之所以具有立体感（3D 效果），其实只是一种视觉呈现，通过透视可以实现此目的。透视可以将一个 2D 平面，在转换的过程当中，呈现 3D 效果。注：并非任何情况下需要透视效果，根据开发需要进行设置。 perspective 有两种写法作为一个属性，设置给父元素，作用于所有 3D 转换的子元素作为transform 属性的一个值，作用于元素自身

6.3D呈现（transform-style）
设置内嵌的元素在 3D 空间如何呈现，这些子元素必须为转换原素。
transform-style:flat;-----------所有子元素在 2D 平面呈现
transform-style:preserve-3d-----------以3D形式显示

qq_43552118zx

关注

0
点赞
踩
0

收藏

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

1.3D属性:(基本同2D,多了Z轴)prespective:200px--------给父元素设置透视效果,作用于所有3D转换的子元素(值越大,转换对象就越近)旋转rotateX() rotateY() rotateZ()位移translateX() translateY() translateZ()扭曲skew() skewX() skewY()缩放scale() ...
复制链接

扫一扫