您的位置：首页 > Web前端 > HTML5

如何用HTML5写一个旋转立方体

2019-03-21 18:12 169 查看

``### 当鼠标放在上面旋转

代码如下

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>立方体</title>
<style type="text/css">
* {margin:0; padding:0;}
ul li {list-style:none;}
.box {width:100%; height:100%;  margin:200px auto; position:relative; perspective:800px;}
.box ul {width:300px; height:300px; position:absolute;left:0; top:300px; bottom:0; right:0; margin:auto; transform-style:preserve-3d; transition:all 10s; }
.box ul:hover {transform:rotateX(360deg) rotateY(360deg);}
.box ul li {width:300px; height:300px; text-align:center; line-height:300px; position:absolute; font-size:48px; backface-visibility:hidden;}
.box ul li:nth-child(1) {background:rgba(255,0,0,.5); transform:translateY(-150px) rotateX(90deg);}
.box ul li:nth-child(2) {background:rgba(0,255,0,.5); transform:translateY(150px) rotateX(-90deg);}
.box ul li:nth-child(3) {background:rgba(0,0,255,.5); transform:translateX(-150px) rotateY(-90deg);}
.box ul li:nth-child(4) {background:rgba(0,155,255,.5); transform:translateX(150px) rotateY(90deg);}
.box ul li:nth-child(5) {background:rgba(255,0,255,.5);transform:
translateZ(150px);}
.box ul li:nth-child(6) {background:rgba(255,255,0,.5); transform:translateZ(-150px) rotateY(180deg);}
</style>
</head>

<body>
<div class="box">
<ul>
<li>上</li>
<li>下</li>
<li>左</li>
<li>右</li>
<li>前</li>
<li>后</li>
</ul>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航