<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>3D立方体动画</title>
<style>
/* 设置外部容器样式 */
.wrap{
width:100px; /* 宽度 */
height:100px; /* 高度 */
padding:100px; /* 内边距 */
border:5px solid #000; /* 黑色边框 */
margin:100px auto; /* 上下外边距为100px，左右居中 */
-webkit-perspective:200px; /* 景深，增加3D效果 */
-webkit-transform:scale(2); /* 缩放2倍 */
-webkit-perspective-origin:center center; /* 景深中心点 */
}
/* 设置3D立方体的样式 */
.box{
width:100px;
height:100px;
background:red; /* 背景颜色 */
position:relative; /* 相对定位 */
-webkit-transform-style:preserve-3d; /* 保留3D样式 */
transition:2s; /* 过渡效果，持续2秒 */
-webkit-transform-origin:center center -50px; /* 变换的原点 */
}
/* 设置立方体的每一个面的样式 */
.box div{
width:100px;
height:100px;
position:absolute; /* 绝对定位，使立方体的每一面叠加 */
color:#fff; /* 字体颜色 */
font-size:50px; /* 字体大小 */
text-align:center; /* 文字居中 */
line-height:100px; /* 文字垂直居中 */
}
/* 设置立方体的各个面的位置和颜色 */
.box div:nth-of-type(1){left:0;top:-100px;background:#9C0; -webkit-transform-origin:bottom; -webkit-transform:rotateX(90deg);} /* 上面 */
.box div:nth-of-type(2){left:-100px;top:0px;background:#CF3; -webkit-transform-origin:right; -webkit-transform:rotateY(-90deg);} /* 左面 */
.box div:nth-of-type(3){left:0px;top:0px;background:#CCF;} /* 正面 */
.box div:nth-of-type(4){left:100px;top:0;background:#0C9;-webkit-transform-origin:left;-webkit-transform:rotateY(90deg);} /* 右面 */
.box div:nth-of-type(5){left:0px;top:100px;background:#69C;-webkit-transform-origin:top;-webkit-transform:rotateX(-90deg);} /* 下面 */
.box div:nth-of-type(6){left:0;top:0;background:#F0C;-webkit-transform:translateZ(-100px) rotateX(180deg);} /* 背面 */
/* 当鼠标悬浮在外部容器时，立方体绕X轴旋转180度 */
.wrap:hover .box{
-webkit-transform:rotateX(180deg);
}
</style>
</head>
<body>
<div class="wrap">
<!-- 3D立方体容器 -->
<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>
