3D效果

最新推荐文章于 2022-08-12 11:54:06 发布

谁伴我闯荡か

最新推荐文章于 2022-08-12 11:54:06 发布

阅读量127

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/qq1632047376/article/details/111502002

版权

透视 perspective

perspective用来模拟人类的视觉位置，也称为视距，即人的眼睛到屏幕的距离。
perspective的单位是像素px
perspective的值越大，表示视距越远，成像越小，反之。
perspective写在被观察元素的父盒子上!
写在父级元素：初级掌握。给整个屏幕设置透视
写在动画上：开发中常用。给当前动画加透视，这里的透视必须写在元素变换前！
body{
perspective:1000px;
-webkit-perspective:1000px;
}

transform-style

控制子元素是否开启3D空间效果。flat | preserve-3d
flat:不开启3D立体空间，默认值.2D平面显示
preserve-3d:子元素开启3D立体空间`
写在父盒子在！

transform-style:preserve-3d;
-webkit-transform-stye:preserve-3d;/*兼容Google和Opera*/
-moz-transform-style:preseve-3d;/*兼容火狐*/

3D变形

translate3d(x,y,z):位移。
等同于translateX(X) translateY(Y) translateZ(Z)
scale3d(x,y,z):缩放。
等同于scaleX(X) scaleY(Y) scaleZ(Z)

rotate3d(x,y,z,angle):旋转,xyz的值0或1.
1：表示要旋转true 0：表示不旋转false 布尔
rotate3d(1,1,1,angle):rotateX(angle) rotateY(angle) rotateZ(angle)
rotate3d(1,0,1,angle):rotateX(angle) rotateZ(angle)
rotate3d(0,0,1,angle):rotateX(0) rotateZ(angle)

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>3D效果</title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}
			
			body {
				position: relative;
				width: 100%;
				height: 100vh;
			}
			
			div {
				position: absolute;
				top: 50%;
				left: 50%;
				margin: -200px;
				width: 400px;
				height: 400px;
			}
			
			.big-box {
				/*透视点:*/
				perspective: 1000px;
				/*兼容火狐浏览器*/
				-兼容Google和Opera浏览器*/
				-webkit-perspective: 1000px;
				/*moz-perspective: 1000px;
				/*让物体在空间3D呈现,flat:默认值,2D平面呈现;*/
				transform-style: preserve-3d;
				background-color: red;
				transform: rotateY(45deg);
				}
			
			.box {
				background-color: green;
				/*左手定律*/
				transform:rotate3d(1,0,0,72deg);
				/*沿着z轴位移:值越大,离得越近,成像越大*/
				/*transform:translateZ(-100px)*/
				/*transform: rotateX(72deg);*/
				/*scale3d()*/
			}
		</style>
	</head>

	<body>
		<!--父盒子：a包含了，b就是a的儿子，a就是父盒子
		兄弟盒子：a和b是同一级-->
		<div class="big-box">
			<div class="box"></div>
		</div>
		<div class="box2"></div>
	</body>

</html>