好看的盒子立体模型

最新推荐文章于 2022-06-27 18:47:34 发布

wx_17819660359

最新推荐文章于 2022-06-27 18:47:34 发布

阅读量413

点赞数

分类专栏： css 文章标签：立体模型

本文链接：https://blog.csdn.net/zrcshendustudy/article/details/81431670

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
 	<html lang="en">
 	<head>
 	<meta charset="UTF-8">
 	<title>Title</title>
 	<style>
 	.box{
 	margin:100px auto;
 	height:500px;
 	width:500px;
 /*	border:1px solid #000;*/
 	/* 配置3d环境*/
 	transform-style:preserve-3d;
 	transform: rotateX(10deg) rotateY(10deg);
 	}
 	.box div{
 	height:400px;
 	width:400px;
 	position:absolute;
 	left:0;
 	top:0;
 	/*opacity:.9;*/
 	}
 	.box .top{
 	background-color:#ff9c23;
 	transform:rotateX(90deg) translateZ(-200px);
 	}
 	.box .bottom{
 	background-color:green;
 	transform:rotateX(90deg) translateZ(200px);
 	}
 	.box .left{
 	background-color:#5cadff;
 	transform:rotateY(90deg) translateZ(200px);
 	}
 	.box .right{
 	background-color:red;
 	transform:rotateY(90deg) translateZ(-200px);
 	}
 	.box .before{
 	background-color:pink;
 	transform:translateZ(200px);
 	}
 	.box .after{
 	background-color:yellow;
 	transform:translateZ(-200px);
 	}
 	table{
 		border-top: #CCCCCC solid 7px;
        border-left: #CCCCCC solid 7px;
        border-right: #F0AD4E solid 7px;
        border-bottom: #F0AD4E solid 7px;
 	}
 	td{
 		border-top: #CCCCCC  solid 10px;
        border-left: #CCCCCC solid 10px;
        border-right: #F3F3F3 solid 10px;
        border-bottom:  #F3F3F3 solid 10px;
 	}
 	</style>
 	</head>
 	<body>
 	<div class="box"> 
 	<div class="top"></div>
 	<div class="bottom"></div> 
 	<div class="left"></div>
 	<div class="right"></div> 
 	<div class="before">
 		<table border="1" cellpadding="1" cellpadding="1" width="400px" height="400px">
 			<tr><td style="font-size: 50px;">对</td><td style="font-size: 50px;">酒</td><td style="font-size: 50px;">当</td><td style="font-size: 50px;">歌</td></tr>
 			<tr><td style="font-size: 50px;">人</td><td style="font-size: 50px;">生</td><td style="font-size: 50px;">几</td><td style="font-size: 50px;">何</td></tr>
 		</table>
 	</div>
 	<div class="after"></div> 
 	</div>	 
 	</body>
 	</html>