CSS3 3D旋转立方体
CSS3 3D旋转立方体,应该说是正方形动画,不过做出这样的效果已经很不错了。
答案:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS3 3D旋转立方体</title>
<style type="text/css" media="screen">
body {
background-color: black;
color: white;
font-family: 'Lucida Grande', Verdana, Arial;
font-size: 12px;
background-image: -webkit-gradient(radial,
50% 500, 1,
50% 500, 400,
from(rgba(255, 255, 255, 0.3)),
to(rgba(255, 255, 255, 0)));
background-repeat: no-repeat;
}
#container {
width: 100%;
height: 700px;
-webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
-webkit-perspective-origin: 50% 225px;
}
#stage {
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform 2s;
-webkit-transform-style: preserve-3d;
}
#shape {
position: relative;
top: 160px;
margin: 0 auto;
height: 200px;
width: 200px;
-webkit-transform-style: preserve-3d;
}
.plane {
position: absolute;
left:0;
top:0;
height: 200px;
width: 200px;
border: 1px solid white;
-webkit-border-radius: 12px;
-webkit-box-sizing: border-box;
text-align: center;
font-family: Times, serif;
font-size: 124pt;
color: black;
background-color: rgba(255, 255, 255, 0.6);
-webkit-transition: -webkit-transform 2s, opacity 2s;
-webkit-backface-visibility: hidden;
}
#shape.backfaces .plane {
-webkit-backface-visibility: visible;
}
#shape {
-webkit-animation: spin 8s infinite linear;
}
@-webkit-keyframes spin {
from { -webkit-transform: rotateY(0); }
to { -webkit-transform: rotateY(-360deg); }
}
.cube > .one {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);
}
.cube > .two {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);
}
.cube > .three {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);
}
.cube > .four {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);
}
.cube > .five {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);
}
.cube > .six {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px) rotate(180deg);
}
.cube > .seven {
-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(90deg) translateZ(100px) rotate(180deg);
}
.cube > .eight {
-webkit-transform: scale3d(0.8, 0.8, 0.8) translateZ(100px);
}
.cube > .nine {
-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(90deg) translateZ(100px);
}
.cube > .ten {
-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(180deg) translateZ(100px);
}
.cube > .eleven {
-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(-90deg) translateZ(100px);
}
.cube > .twelve {
-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(-90deg) translateZ(100px);
}
/* ---------- ring styles ------------- */
.ring > .one {
-webkit-transform: translateZ(380px);
}
.ring > .two {
-webkit-transform: rotateY(30deg) translateZ(380px);
}
.ring > .three {
-webkit-transform: rotateY(60deg) translateZ(380px);
}
.ring > .four {
-webkit-transform: rotateY(90deg) translateZ(380px);
}
.ring > .five {
-webkit-transform: rotateY(120deg) translateZ(380px);
}
.ring > .six {
-webkit-transform: rotateY(150deg) translateZ(380px);
}
.ring > .seven {
-webkit-transform: rotateY(180deg) translateZ(380px);
}
.ring > .eight {
-webkit-transform: rotateY(210deg) translateZ(380px);
}
.ring > .nine {
-webkit-transform: rotateY(-120deg) translateZ(380px);
}
.ring > .ten {
-webkit-transform: rotateY(-90deg) translateZ(380px);
}
.ring > .eleven {
-webkit-transform: rotateY(300deg) translateZ(380px);
}
.ring > .twelve {
-webkit-transform: rotateY(330deg) translateZ(380px);
}
.controls {
width: 80%;
margin: 0 auto;
padding: 5px 20px;
-webkit-border-radius: 12px;
background-color: rgba(255, 255, 255, 0.5);
}
.controls > div {
margin: 10px;
}
</style>
<script type="text/javascript" charset="utf-8">
function hasClassName(inElement, inClassName)
{
var regExp = new RegExp('(?:^|\\s+)' + inClassName + '(?:\\s+|$)');
return regExp.test(inElement.className);
}
function addClassName(inElement, inClassName)
{
if (!hasClassName(inElement, inClassName))
inElement.className = [inElement.className, inClassName].join(' ');
}
function removeClassName(inElement, inClassName)
{
if (hasClassName(inElement, inClassName)) {
var regExp = new RegExp('(?:^|\\s+)' + inClassName + '(?:\\s+|$)', 'g');
var curClasses = inElement.className;
inElement.className = curClasses.replace(regExp, ' ');
}
}
function toggleClassName(inElement, inClassName)
{
if (hasClassName(inElement, inClassName))
removeClassName(inElement, inClassName);
else
addClassName(inElement, inClassName);
}
function toggleShape()
{
var shape = document.getElementById('shape');
if (hasClassName(shape, 'ring')) {
removeClassName(shape, 'ring');
addClassName(shape, 'cube');
} else {
removeClassName(shape, 'cube');
addClassName(shape, 'ring');
}
// Move the ring back in Z so it's not so in-your-face.
var stage = document.getElementById('stage');
if (hasClassName(shape, 'ring'))
stage.style.webkitTransform = 'translateZ(-200px)';
else
stage.style.webkitTransform = '';
}
function toggleBackfaces()
{
var backfacesVisible = document.getElementById('backfaces').checked;
var shape = document.getElementById('shape');
if (backfacesVisible)
addClassName(shape, 'backfaces');
else
removeClassName(shape, 'backfaces');
}
</script>
</head>
<body screen_capture_injected="true">
<div id="container">
<div id="stage">
<div id="shape" class="cube backfaces">
<div class="plane one">1</div>
<div class="plane two">2</div>
<div class="plane three">3</div>
<div class="plane four">4</div>
<div class="plane five">5</div>
<div class="plane six">6</div>
<div class="plane seven">7</div>
<div class="plane eight">8</div>
<div class="plane nine">9</div>
<div class="plane ten">10</div>
<div class="plane eleven">11</div>
<div class="plane twelve">12</div>
</div>
</div>
</div>
</body>
</html>
上一个:CSS3日出特效-HTML5日月星辰变换
下一个:css3使用transform属性制作js弹性运动