<!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">
<p align="center" style="font-size: 92px;padding-top: 60px;">贰</p>
</div>
<div class="after"></div>
</div>
</body>
</html>
扫一扫
436
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
