阅读 39

CSS3中的3D变换与简易立方体的制作

大家好,这里是demo软件园,今天为大家分享的是css3中的3d变换。

我们首先要知道在浏览器中,X轴是从左到右,Y轴是从上到下,Z轴是从里到外。CSS的3d变换中,有以下属性:

A.3D旋转:

img4

CSS3中的3D旋转主要包括四个功能函数 rotateX(angle)、
rotateY(angle)、
rotateZ(angle)、等价于rotate(angle)
rotate3d(x,y,z,angle),x, y, z分别接受一个数值(number),用来计算矢量方向(direction vector),矢量方向是三维空间中的一条线, 从坐标系原点到x, y, z值确定的那个点,元素围绕这条线旋转angle指定的值。

B.3D平移:

Img5

transform: translate3d(translateX,translateY,translateZ); translateZ是3D Transformaton特有的,其他两个2D中就有, translateZ 它不能是百分比值; 那样的移动是没有意义的。

C.3D缩放: img6

transform: scaleZ(number) transform: scale3d(scaleX,scaleY,scaleZ); 如果只设置scaleZ(number),你会发现元素并没有被扩大或压缩,scaleZ(number)需要和translateZ(length)配合使用,number乘以length得到的值,是元素沿Z轴移动的距离,从而使得感觉被扩大或压缩。

D.景深:让3D场景有近大远小的效果(我们肉眼距离屏幕的距离),是一个不可继承属性,但他可以作用于后代元素(不是作用于本身的),需要注意的是景深是会叠加的,我们要尽量避免景深叠加。 简单的理解,景深就是我们的肉眼距离显示器的距离,景深越大,元素离我们越远,效果就不好,在CSS3中,perspective用于激活一个3D空间,属性值就是景深大小(默认none无景深)。我们来看看有无景深的效果: 无景深效果图: 在这里插入图片描述

有景深效果图: 在这里插入图片描述

原理:景深越大 灭点越远 元素变形更小 景深越小 灭点越近 元素变形更大 (灭点:指的是立体图形各条边的延伸线所产生的相交点,透视点的消失点) 景深基点(视角的位置):perspective-origin:50% 50%;(默认值) 同perspective属性,也是设置在父元素上,对后代元素起作用。 这个属性来设置你在X, Y轴坐标确定的那个点来看这个元素,Z轴是被perspective属性设置的 使用景深的两种方式: transform: perspective(depth): depth的默认值是none,可以设置为一个长度值,这个长度是沿着Z轴距离坐标原点的距离。1000px被认为是个正常值 若使用perspective()函数,那么他必须被放置在transform属性的首位,如果放在其他函数之后,则会被忽略 perspective: depth: 同perspective()函数一样,depth的默认值是none,可以设置为一个长度值,这个长度是沿着Z轴距离坐标原点的距离。他们唯一的区别是,perspective属性是被用于元素的后代元素,而不是元素本身;就是说,为某个元素设置perspective属性后,是对这个元素的子元素起作用,而不是这个元素本身。

E.transform-style: 这个属性指定了子元素如何在空间中展示,营造有层级的3d舞台,只有两个属性值:flat(默认)和preserve-3d. flat :表示所有子元素在2D平面呈现, preserve-3d :表示所有子元素在3D平面呈现, 如果被扁平化,则子元素不会独立的存在于三维空间。它是一个不可继承属性,作用于子元素。

F.隐藏背面: backface-visibility属性用来设置,是否显示元素的背面,默认是显示的。 backface-visibility: keyword; keyword有两个值,hidden和visible,默认值是visible。 最后,我们根据3d变换基础知识制作简易旋转立方体,代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				width: 300px;
				height: 300px;
				border: 1px solid;
				
				perspective: 200px;
			}
			
			#wrap > .box{
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				width: 100px;
				height: 100px;
				transition:4s ;
				transform-style: preserve-3d;
				transform-origin: center center -50px; 
			}
			#wrap > .box > div{
				position: absolute;
				width: 100px;
				height: 100px;
				background: rgba(123,123,123,.2);
				text-align: center;
				font: 50px/100px "微软雅黑";
				transform-origin: center center -50px;
				/* backface-visibility: hidden; */
			}
			#wrap > .box > div:nth-child(6){
				transform: rotateX(270DEG);
			}
			#wrap > .box > div:nth-child(5){
				transform: rotateX(90DEG);
			}
			#wrap > .box > div:nth-child(4){
				transform: rotateY(90DEG);
			}
			#wrap > .box > div:nth-child(3){
				transform: rotateY(270DEG);
			}
			#wrap > .box > div:nth-child(2){
				transform: rotateY(180DEG) rotate(180DEG);
			}
			#wrap > .box > div:nth-child(1){
			}
			
			#wrap:hover > .box{
				transform: rotate3d(1,2,3,720deg);
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="box">
				<div>前</div>
				<div>后</div>
				<div>左</div>
				<div>右</div>
				<div>上</div>
				<div>下</div>
			</div>
		</div>
	</body>
</html>

复制代码

效果图: 在这里插入图片描述

好了,今天的分享就到这里,当然,可能存在些许错误望大家海涵并在评论区多多指正交流,谢谢大家花费时间阅览!

文章分类
前端
文章标签