8、3d变换

ゞ浴缸里的玫瑰 2022-04-17 03:56 122阅读 0赞

css3中提供了三维方向的旋转、平移、缩放操作。

**1、平移translate3d()**  
translate3d(x, y, z)表示CSS 函数在3D空间内移动一个元素的位置。x、y、z如果都为正值，表示向数轴的正方向移动，如果为负值，向数轴的反方向移动。

<html>
    	<head>
    		<meta charset="UTF-8">
    		<style type="text/css">
    			#wrap{
    				width: 500px;
    				height: 500px;
    				left: 0px;
    				right: 0px;
    				top: 0px;
    				bottom: 0px;
    				margin: auto;
    				border: 1px solid;
    			}
    			
    			#wrap > .inner{
    				width: 300px;
    				height: 300px;
    				margin-left: 100px;
    				margin-top: 100px;
    				background: yellowgreen;
    				border-radius: 50%;
    				transition-duration: 3s;
    			}
    			
    			.inner:hover{
    				/*分别向x、y、z轴移动-100px，只是在z轴看不出来*/
    				transform: translate3d(-100px, -100px, -100px);
    			}
    		</style>
    	</head>
    	<body>
    		<div id="wrap">
    			<div class="inner"></div>
    		</div>
    	</body>
    </html>

**2、缩放scale3d**  
scale3d(x, y, z)表示在x、y、z轴上缩放的比例，比如scale3d(2, 2, 2)表示分别在x、y、z轴上扩大原来的2倍，scale3d(-2, 2, 2)表示先在x轴方向翻转180，然后扩大到原来的2倍

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<style type="text/css">
    			#wrap{
    				width: 500px;
    				height: 500px;
    				left: 0px;
    				right: 0px;
    				top: 0px;
    				bottom: 0px;
    				margin: auto;
    				border: 1px solid;
    			}
    			
    			#wrap > .inner{
    				width: 300px;
    				height: 300px;
    				margin-left: 100px;
    				margin-top: 100px;
    				background: yellowgreen;
    				border-radius: 50%;
    				transition-duration: 3s;
    			}
    			
    			.inner:hover{
    				transform: scale3d(-0.5, 0.5, 0.5);
    			}
    		</style>
    	</head>
    	<body>
    		<div id="wrap">
    			<div class="inner"></div>
    		</div>
    	</body>
    </html>

**3、旋转rotate3d**  
rotate3d(x, y, z, deg)指定了旋转的射线，(x, y, z)与(0, 0, 0)之间可以形成唯一一条射线，图形就是沿着这条射线旋转指定的deg。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<style type="text/css">
    			#wrap{
    				width: 500px;
    				height: 500px;
    				left: 0px;
    				right: 0px;
    				top: 0px;
    				bottom: 0px;
    				margin: auto;
    				border: 1px solid;
    			}
    			
    			#wrap > .inner{
    				width: 300px;
    				height: 300px;
    				margin-left: 100px;
    				margin-top: 100px;
    				background: yellowgreen;
    				border-radius: 50%;
    				transition-duration: 3s;
    			}
    			
    			.inner:hover{
    				transform: rotate3d(1, 0, 0, 360deg);
    			}
    		</style>
    	</head>
    	<body>
    		<div id="wrap">
    			<div class="inner"></div>
    		</div>
    	</body>
    </html>

**4、景深perspective**  
perspective 属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定。以上三维变化都要指定景深才可以能看出三维效果，否则观察xy二维变化。推荐一篇关于景深的[博客][Link 1]，该博客讲清楚了景深的概念。另外可以设置perspective-origin，表示从元素的哪个方向看元素，可选left/right/bottom/top，或者组合使用。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<style type="text/css">
    			#wrap{
    				width: 500px;
    				height: 500px;
    				left: 0px;
    				right: 0px;
    				top: 0px;
    				bottom: 0px;
    				margin: auto;
    				border: 1px solid;
    				/*要对inner用景深，一定要在它的包裹层设置perspective景深才可以*/
    				perspective: 100px;
    
    			}
    			
    			#wrap > .inner{
    				width: 300px;
    				height: 300px;
    				margin-left: 100px;
    				margin-top: 100px;
    				background: yellowgreen;
    				border-radius: 50%;
    				transition-duration: 3s;
    			}
    			
    			.inner:hover{
    				transform: rotate3d(1, 1, 1, 360deg);
    			}
    		</style>
    	</head>
    	<body>
    		<div id="wrap">
    			<div class="inner"></div>
    		</div>
    	</body>
    </html>

[Link 1]: http://www.softwhy.com/article-918-1.html