超级酷的正方体
-------------------------代码部分-------------------------
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<style>
body{
background: black;
}
ul{
list-style: none;
width: 200px;
height: 200px;
margin: 100px auto;
position: relative;
-webkit-transform-style: preserve-3d;/*兼容谷歌浏览器和safari浏览器*/
}
li{
width: 200px;
height: 200px;
position: absolute;
text-align: center;
line-height: 200px;
font-size: 80px;
font-weight: bold;
color: white;
}
li:nth-child(1){/*第1个li:上面*/
background: rgba(128,128,128,0.98);
-webkit-transform: rotateX(90deg) translateZ(100px);
}
li:nth-child(2){/*第2个li:下面*/
background: rgba(0,0,255,0.98);
-webkit-transform: rotateX(360deg) translateZ(-100px);
}
li:nth-child(3){/*第3个li:右面*/
background: rgba(255,0,255,0.98);
-webkit-transform: rotateY(-90deg) translateZ(100px);
}
li:nth-child(4){/*第4个li:左面*/
background: rgba(0,255,255,0.98);
-webkit-transform: rotateY(90deg) translateZ(100px);
}
li:nth-child(5){/*第5个li:后面*/
background: rgba(255,0,0,0.98);
-webkit-transform: rotateX(360deg) translateZ(100px);
}
li:nth-child(6){/*第6个li:正面*/
background: rgba(0,139,139,0.98);
-webkit-transform: rotateX(270deg) translateZ(100px);
}
/**/
ul{
-webkit-animation: myanima 5s linear infinite;
}
@-webkit-keyframes myanima{
0%{
-webkit-transform: rotateX(0deg) rotateY(0deg);
}
100%{
-webkit-transform: rotateX(360deg) rotateY(360deg);
}
}
#bottom{
position: absolute;
width: 200px;
height: 200px;
bottom: 20px;
margin: 0 auto;
display: block;
left: 48%;
}
#bottom input{
display: block;
position: absolute;
}
#bottom input:nth-child(1){
left: 100px;
}
#bottom input:nth-child(2){
left: -100px;
}
#bottom input:nth-child(3){
top: -100px;
}
#bottom input:nth-child(4){
top: 100px;
}
style>
<style type="text/css" id="changes">
/*存放修改*/
style>
<script type="text/javascript">
function change(num1,num2,num3,num4){
var stylec=document.getElementById("changes");
//执行
stylec.innerHTML="@-webkit-keyframes myanima{0%{-webkit-transform: rotateX("+num1+"deg) rotateY("+num2+"deg);}100%{-webkit-transform: rotateX("+num3+"deg) rotateY("+num4+"deg);}}";
}
script>
<body>
<ul id="ul">
<li>1li>
<li>2li>
<li>3li>
<li>4li>
<li>5li>
<li>6li>
ul>
<div id="bottom">
<input type="button" value="→" onclick="change(0,0,0,360)"/>
<input type="button" value="←" onclick="change(0,360,0,0)"/>
<input type="button" value="↑" onclick="change(0,0,360,0)"/>
<input type="button" value="↓" onclick="change(360,0,0,0)"/>
<input type="button" value="重设" onclick="change(0,0,360,360)"/>
div>
body>
html>