盒子模型
效果图
3D旋转.gif
代码如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content="text/html; charset=utf-8">
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>3D盒子模型</title>
</head>
<style>
*{margin:0px;padding:0px;}
.wrap{width:300px;height:300px;padding:200px;margin:100px auto;border:10px solid black;position:relative;/*创建基深*/-webkit-perspective:300px;-webkit-perspective-origin:center center; }
.box{width:200px;height:200px;background:red;position:absolute;left:250px;top:250px;-webkit-transform-style: preserve-3d;transition: 2s; -webkit-transform-origin: center center -100px;}/*创建3D模型*/
.box div{position:absolute;width: 200px;height:200px;font-size:50px;color:#ffffff;text-align: center;line-height:200px;}
.box div:nth-of-type(1){background:black;left:0px;top:-200px;-webkit-transform: rotateX(90deg);-webkit-transform-origin: bottom;}
.box div:nth-of-type(2){background:orange;left:-200px;top:0px;-webkit-transform: rotateY(-90deg);-webkit-transform-origin: right;}
.box div:nth-of-type(3){background:blueviolet;left:0px;top:0px;}
.box div:nth-of-type(4){background:#451b0e;left:200px;top:0px;-webkit-transform: rotateY(90deg);-webkit-transform-origin: left;}
.box div:nth-of-type(5){background:#0c1966;left:0px;top:200px;-webkit-transform: rotateX(-90deg);-webkit-transform-origin: top;}
.box div:nth-of-type(6){background:#00cc99;left:0px;top:0px;-webkit-transform: translateZ(-200px) rotateX(-180deg);}
.wrap:hover .box{-webkit-transform: rotateX(180deg);}
</style>
<body>
<div class="wrap">
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
</body>
</html>
