<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正方体</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrap"> <!--最大的空间div-->
<div class="cube"> <!--正方体的box-->
<!--这个是大的正方体的六面-->
<div class="out-front">前面</div>
<div class="out-back">后面</div>
<div class="out-left">左面</div>
<div class="out-right">右面</div>
<div class="out-top">上面</div>
<div class="out-bottom">下面</div>
<!--这个是小的正方体的六面-->
<span class="in-front"> <!--前面的点数1-->
<span class="points"></span>
</span>
<span class="in-back"> <!--后面的点数3-->
<span class="points"></span>
<span class="points pitB2"></span>
<span class="points pitB3"></span>
</span>
<span class="in-left"> <!--左面的点数2-->
<span class="points"></span>
<span class="points pitL2"></span>
</span>
<span class="in-right"> <!--右面的点数4-->
<span class="points"></span>
<span class="points"></span>
<span class="points"></span>
<span class="points"></span>
</span>
<span class="in-top"> <!--上面的点数5-->
<span class="pitT1">
<span class="points"></span>
<span class="points "></span>
</span>
<span class="pitT2">
<span class="points"></span>
</span>
<span class="pitT3">
<span class="points"></span>
<span class="points"></span>
</span>
</span>
<span class="in-bottom"> <!--下面的点数6-->
<span class="points"></span>
<span class="points"></span>
<span class="points"></span>
<span class="points"></span>
<span class="points"></span>
<span class="points"></span>
</span>
</div>
</div>
</body>
</html>
CSS3骰子3D立方体旋转动画
需积分: 45 186 浏览量
2017-09-19
18:37:45
上传
评论
收藏 3KB ZIP 举报
MNXYPRO
- 粉丝: 9
- 资源: 58