Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > 转动的立方体HTML5
Blogger Information
Blog 5
fans 0
comment 1
visits 5433
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
转动的立方体HTML5
branton的博客
Original
606 people have browsed it

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection"content="telephone=no, email=no" />
</head>
<body>

<style type="text/css">
*{margin: 0;padding: 0;}
html,body{height: 100%;background: black;}
.wrap{
height: 100%;
position: relative;
-webkit-transform-style:preserve-3d;
-webkit-perspective:0px;

-moz-transform-style:preserve-3d;
-moz-perspective:0px;

-webkit-animation:mydhua 5s ease infinite;
-moz-animation:mydhua 5s ease infinite;
}
.box{
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin:-100px 0 0 -100px; 
line-height: 200px;
text-align: center;
font-size: 48px;
color: white;
}
.box1{
-webkit-transform:rotatey(90deg) translatez(-100px);
-moz-transform:rotatey(90deg) translatez(-100px);
background: rgba(128,0,128,.5);
}
.box2{
-webkit-transform:rotatey(90deg) translatez(100px);
-moz-transform:rotatey(90deg) translatez(100px);
background: rgba(255,0,255,.5);
}
.box3{
-webkit-transform:rotatex(90deg) translatez(100px);
-moz-transform:rotatex(90deg) translatez(100px);
background: rgba(255,153,204,.5);
}
.box4{
-webkit-transform:rotatex(90deg) translatez(-100px);
-moz-transform:rotatex(90deg) translatez(-100px);
background: rgba(0,204,255,.5);
}
.box5{
-webkit-transform: translatez(-100px);
-moz-transform:translatez(-100px);
background: rgba(153,204,255,.5);
}
.box6{
-webkit-transform: translatez(100px);
-moz-transform:translatez(100px);
background: rgba(0,255,255,.5);
}
@-webkit-keyframes mydhua{
0%{-webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);-webkit-transform-origin: center center;}
100%{-webkit-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg);-webkit-transform-origin: center center; }
}
@-moz-keyframes mydhua{
0%{-moz-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);-webkit-transform-origin: center center;}
100%{-moz-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg); -webkit-transform-origin: center center;}
}
</style>

<div class="wrap">
<div class="box1 box">1</div>
<div class="box2 box">2</div>
<div class="box3 box">3</div>
<div class="box4 box">4</div>
<div class="box5 box">5</div>
<div class="box6 box">6</div>
</div>


<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
var url = /(\w+):\/\/([\w.]+)\/(\S*)/;
var text = window.location.href;
var result = text.match(url);
</script>
</body>
</html>


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post