(5)立方体3D实现

进阶路

已于 2022-05-20 15:03:13 修改

阅读量187

点赞数 1

分类专栏：前端之HTML和CSS基础文章标签： css3 前端 css

于 2022-05-20 14:28:54 首次发布

本文链接：https://blog.csdn.net/Q_999999/article/details/124882573

版权

前端之HTML和CSS基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

backface-visibility：属性用来设置是否显示元素的背面，默认是显示的。

backface-visibility: visible;

效果图：

backface-visibility: hidden;

效果图：

代码1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box1{
				width: 400px;
				height: 400px;
				border: 1px solid;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				margin: auto;
				perspective: 200px;
				background: url(img/backimg.jpeg) no-repeat;
				background-size: 100% 100%;
			}
			.box1 > .container{
				width: 100px;
				height: 100px;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				margin: auto;
				transform-style: preserve-3d;
				transition: 3s;
				transform-origin: center center -50px;	/*更改旋转中心*/
			}
			.container > div{
				width: 100px;
				height: 100px;
				background-color: rgba(0,255,0,.5);
				position: absolute;
				text-align: center;
				font: 40px/100px "微软雅黑";
				backface-visibility: visible;
			}
			.container > div:nth-child(1){	/*上*/	/*以下6个面在转的时候，也是需要3D舞台的*/
				top: -100px;
				transform: rotateX(90deg);
				transform-origin: bottom;
			}
			.container > div:nth-child(2){	/*下*/
				bottom: -100px;
				transform: rotateX(-90deg);
				transform-origin: top;
			}
			.container > div:nth-child(3){	/*左*/
				left: -100px;
				transform: rotateY(-90deg);
				transform-origin: right;
			}
			.container > div:nth-child(4){	/*右*/
				right: -100px;
				transform: rotateY(90deg);
				transform-origin: left;
			}
			.container > div:nth-child(5){	/*前*/
				z-index: 1;
			}
			.container > div:nth-child(6){	/*后：往后推100px*/
				transform: translateZ(-100px) rotateX(180deg);
			}
			.box1:hover > .container{
				transform: rotateX(360deg);
			}
		</style>
	</head>
	<body>
		<div class="box1">	<!--最外层区域-->
			<div class="container">	<!--六个面的包裹区，该div产生3D变化-->
				<div>上</div>
				<div>下</div>
				<div>左</div>
				<div>右</div>
				<div>前</div>
				<div>后</div>
			</div>
		</div>
	</body>
	
</html>

代码2：将6个面的旋转基点更改到正立方体的几何中心，围绕着该点旋转

.container > div{
               width: 100px;
               height: 100px;
               background-color: rgba(0,255,0,1);
               position: absolute;
               text-align: center;
               font: 40px/100px "微软雅黑";
               transform-origin: center center -50px; /*将每个div的中心更改到正方体的中心*/
           }
           .container > div:nth-child(1){   /*上*/
               transform: rotateX(90deg);
           }
           .container > div:nth-child(2){   /*下*/
               transform: rotateX(270deg);
           }
           .container > div:nth-child(3){   /*左*/
               transform: rotateY(270deg);
           }
           .container > div:nth-child(4){   /*右*/
               transform: rotateY(90deg);
           }
           .container > div:nth-child(5){   /*前*/
           }
           .container > div:nth-child(6){   /*后*/
               transform: rotateY(180deg) rotate(180deg);
           }
           .box1:hover > .container{
               transform: rotateX(360deg);
           }