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

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

代码如下

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

如何用HTML5写一个旋转立方体相关推荐

如何用HTML写一个旋转万花筒
一个简单的万花筒我们该怎么做,如何才能让他旋转起来,其实很简单.其中需要重点注意的是动画以及旋转. 其中我们调用了css3里边的伪元素hover:当鼠标悬停在元素上方时添加样式效果触发,我们调用hov ...
php星星符号怎么打,如何用html5写特殊符号五角星
php函数怎么转换html中的特殊字符方法/步骤 1 htmlspecialchars()转义特别的字符为HTML实体: '&' (ampersand) becomes '&' '& ...
贪吃蛇博弈算法python_算法应用实践：如何用Python写一个贪吃蛇AI
原标题:算法应用实践:如何用Python写一个贪吃蛇AI 前言这两天在网上看到一张让人涨姿势的图片,图片中展示的是贪吃蛇游戏, 估计大部分人都玩过.但如果仅仅是贪吃蛇游戏,那么它就没有什么让人涨姿势 ...
[译] 如何用 Python 写一个 Discord 机器人
原文地址:How to write a Discord bot in Python 原文作者:Junpei Shimotsu 译文出自:掘金翻译计划本文永久链接:github.com/xitu/go ...
如何用Java写一个斗地主（一）
如何用Java写一个斗地主(一) 序言正文创建卡牌打乱牌序发牌课后吐槽序言作为一名大三的普普通通大学生,被实习老师(?)强迫下,第一次开始写CSDN的博客,如果写的不好,请多多包涵咯. ...
如何用LaTeX写一个PPT
如何用LaTeX写一个PPT 说到写PPT大家一般会想到的是微软的Microsoft PowerPoint,因为他更易于制作并且拥有丰富的动画,但是当你需要制作一个学术相关的ppt时,你需要更好的排 ...
手机版python3h如何自制游戏_教你如何用 Python 写一个小游戏
教你如何用 Python 写一个小游戏引言最近 python 语言大火, 除了在科学计算领域 python 有用武之地之外, 在游戏后台等方面, python 也大放异彩, 本篇博文将按照正规的项 ...
如何用java写一个年日历
如何用java写一个年日历没啥难的,话不多说上代码
循环彩灯编程c语言环境,如何用汇编语言写一个循环彩灯的程序，采用定时器方式1工作...
如何用汇编语言写一个循环彩灯的程序,采用定时器方式1工作关注:120 答案:2 信息版本:手机版解决时间 2019-01-09 23:07 遮云壑 2019-01-09 14:42 由89C5 ...

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

代码如下

如何用HTML5写一个旋转立方体相关推荐

最新文章

热门文章