html5制作旋转正方体,如何制作一个旋转的正方体

html>

正方体

html

{

background: -webkit-radial-gradient(center, ellipse, #430d6d 0%, #000000 100%);

background: radial-gradient(ellipse at center, #430d6d 0%, #000000 100%);

height: 100%;

}

#window {

width: 20em;

height: 20em;

position: absolute;

left: 50%;

top:50%;

margin-left: -10em;

margin-top: -10em;

-webkit-perspective: 1000px;

}

#box{

-webkit-animation: 6s spin linear infinite;

position: absolute;

width: 100%;

height: 100%;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-transform: rotateX(-20deg) rotateY(-20deg);

}

.face {

background: -webkit-linear-gradient(left, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), -webkit-linear-gradient(top, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px);

-webkit-background-size: 2.5em 2.5em;

background-color: rgba(0, 0, 0, 0.5);

position: absolute;

width: 100%;

height: 100%;

color: #77ffb9;

box-shadow: inset 0 0 5em rgba(125, 125, 125, 0.8);

}

#face-front {

transform: translateZ(10em);

}

#face-left {

-webkit-transform: rotateY(-90deg) translateZ(10em);

}

#face-top {

-webkit-transform: rotateX(90deg) translateZ(10em);

}

#face-right {

-webkit-transform: rotateY(90deg) translateZ(10em);

}

#face-bottom {

-webkit-transform: rotateX(-90deg) translateZ(10em);

}

#face-back {

-webkit-transform: rotateX(180deg) translateZ(10em);

}

@-webkit-keyframes spin

{

from

{

-webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg);

transform: translateZ(-10em) rotateX(0) rotateY(0deg);

}

to

{

-webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);

transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);

}

}

1

2

3

4

5

6

X:

οnchange="ratate()"

/>

Y:

/>

function ratate()

{

var x = document.getElementById('changex').value;

var y = document.getElementById('changey').value;

document.getElementById('window').style.webkitPerspectiveOrigin =

x+"% "+y+"%";

}