8、3d变换

最新推荐文章于 2022-11-27 15:41:47 发布

苍鹰蛟龙

最新推荐文章于 2022-11-27 15:41:47 发布

阅读量204

点赞数

分类专栏： CSS3 文章标签： translate3d scale3d rotate3d perspective

本文链接：https://blog.csdn.net/u010502101/article/details/83999702

版权

CSS3 专栏收录该内容

13 篇文章 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二维变化。推荐一篇关于景深的博客，该博客讲清楚了景深的概念。另外可以设置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>

苍鹰蛟龙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
8、3d变换

css3中提供了三维方向的旋转、平移、缩放操作。1、平移translate3d()translate3d(x, y, z)表示CSS 函数在3D空间内移动一个元素的位置。x、y、z如果都为正值，表示向数轴的正方向移动，如果为负值，向数轴的反方向移动。 &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;
复制链接

扫一扫

专栏目录