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

最新推荐文章于 2021-06-10 13:21:49 发布

Rainpark

最新推荐文章于 2021-06-10 13:21:49 发布

阅读量3k

点赞数 3

文章标签：立方体 HTML5 旋转代码

本文链接：https://blog.csdn.net/Rainparjt/article/details/88722074

版权

``### 当鼠标放在上面旋转
在这里插入图片描述

代码如下

<!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>