Skip to content

Instantly share code, notes, and snippets.

@smallnewer

smallnewer/css3 3d cube.html

Created August 29, 2013 14:21
Show Gist options
  • Save smallnewer/6378738 to your computer and use it in GitHub Desktop.
Save smallnewer/6378738 to your computer and use it in GitHub Desktop.
Download ZIP
一个css3 做的常见css3立方体效果。 注：在IE10下，必须对6面div同时进行位移才行。而webkit等其他浏览器只需要移动一个父标签就行。
Raw
css3 3d cube.html
<html>
<head>
<title>3d</title>
<meta charset='utf-8' />
</head>
<body>
<div class="out">
<div class="perspective">
<div class="cube">
<div class="face one"><video src="a.mp4" width=100% height=100% autoplay></video></div>
<div class="face two">2</div>
<div class="face thr">3</div>
<div class="face fou">4</div>
<div class="face fiv">5</div>
<div class="face six">6</div>
</div>
</div>
<div class="perspective">
<div class="cube">
<div class="face one">1</div>
<div class="face two">2</div>
<div class="face thr">3</div>
<div class="face fou">4</div>
<div class="face fiv">5</div>
<div class="face six">6</div>
</div>
</div>
<div class="perspective">
<div class="cube">
<div class="face one">1</div>
<div class="face two">2</div>
<div class="face thr">3</div>
<div class="face fou">4</div>
<div class="face fiv">5</div>
<div class="face six">6</div>
</div>
</div>
<div class="perspective">
<div class="cube">
<div class="face one">1</div>
<div class="face two">2</div>
<div class="face thr">3</div>
<div class="face fou">4</div>
<div class="face fiv">5</div>
<div class="face six">6</div>
</div>
</div>
</div>
<style type="text/css">
.out{
width: 800px;
margin: 150px auto;
-webkit-perspective :800;
overflow: visible;
height: 100px;
}
.perspective{
/*-webkit-perspective :400;*/
width: 100px;
height: 100px;
float: left;
margin-left:100px;
}
.cube{
position: relative;
width: 100px;
height: 100px;
/*margin:100px auto;*/
-webkit-transform-style:preserve-3d;
-webkit-transform:rotateX(0deg);
-webkit-animation:you 5s linear infinite;
}
.face{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid red;
line-height: 100px;
font-size: 28px;
text-align: center;
text-shadow: 0 0 10px red;
box-shadow: 0 0 10px red;
/*-webkit-transform-style:preserve-3d;*/
}
.one{
-webkit-transform: translateZ(50px);
}
.two{
-webkit-transform: rotateX(90deg) translateZ(50px);
}
.thr{
-webkit-transform: rotateX(180deg) translateZ(50px);
}
.fou{
-webkit-transform: rotateX(-90deg) translateZ(50px);
}
.fiv{
-webkit-transform: rotateY(-90deg) translateZ(50px);
}
.six{
-webkit-transform: rotateY(90deg) translateZ(50px);
}
@-webkit-keyframes you{
0%{
-webkit-transform:rotateX(0deg) rotateY(0deg);
}
50%{
-webkit-transform:rotateX(720deg) rotateY(45deg);
}
100%{
-webkit-transform:rotateX(0deg) rotateY(0deg);
}
}
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment