2020-11-11 css实例：3d旋转盒子及样式解释

最新推荐文章于 2024-08-29 15:49:54 发布

Amanda&Rachel

最新推荐文章于 2024-08-29 15:49:54 发布

阅读量282

点赞数 1

分类专栏： css学习总结文章标签：定位 css css3

本文链接：https://blog.csdn.net/m0_51907938/article/details/109628532

版权

css学习总结专栏收录该内容

35 篇文章

订阅专栏

css实例：弹性盒子3d旋转盒子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{		/*最外面的大盒子*/
				width: 300px;/*宽度*/
				height: 300px;/*高度*/
				padding: 50px;/*字与边框之间的间距*/
				border:3px solid saddlebrown;/*给盒子加边框*/
				margin: 200px auto;/*设置盒子居中*/
				perspective: 2000px;/*景深2000px，设置景深才能看到3d效果*/
			}
			.content{		/*中间包含内容的盒子*/
				width: 300px;
				height: 300px;
				/*background: sandybrown;*/
				transition:10s;/*设置3d效果需要完成的时间*/
				position: relative;/*父元素设置相对定位*/
				transform-style: preserve-3d;/*设置该属性开启3d效果*/
			}
			.box:hover .content{	/*鼠标滑动到box时，content的属性*/
				transform: rotateX(360deg);/*设置360度水平旋转*/
			}
			.content div{		/*盒子里每一个面*/
				width: 300px;
				height: 300px;
				background: paleturquoise;
				position: absolute;/*设置绝对定位，把所有面定位到同一位置*/
				left:0;
				top:0;
				text-align: center;/*文字水平居中*/
				line-height: 300px;/*文字垂直居中*/
				font-size: 100px;/*字体大小*/
				color: #fff;/*字体颜色*/
				opacity: 0.5;/*不透明度*/
			}
			.content div:nth-of-type(1){		/*选择content里第一个div元素*/
				transform: rotateX(0deg) translateZ(150px);/*X轴旋转0度，z轴旋转150度（X轴是div在哪里的位置，Z轴默认是宽度的一半）*/
			}
			.content div:nth-of-type(2){
				transform: rotateY(-90deg) translateZ(150px);
			}
			.content div:nth-of-type(3){
				transform: rotateY(90deg) translateZ(150px);
			}
			.content div:nth-of-type(4){
				transform: rotateX(90deg) translateZ(150px);
			}
			.content div:nth-of-type(5){
				transform: rotateX(-90deg) translateZ(150px);
			}
			.content div:nth-of-type(6){
				transform: rotateX(180deg) translateZ(150px);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="content">
				<div>1</div>
				<div>2</div>
				<div>3</div>
				<div>4</div>
				<div>5</div>
				<div>6</div>
			</div>
		</div>
	</body>
</html>