Публикую здесь код
Cubo 3D, демку которого можно увидеть
в блоге
.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cubo 3D</title>
<style>
.stage
{
perspective: 1000px;
-webkit-perspective: 1000px;
/* perspective-origin: 50% 50%;*/ /* this is the default*/
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.stage2
{
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
position: absolute;
width: 100%;
height: 100%;
transform: translateZ(200px);
-webkit-transform: translateZ(200px);
}
.cube
{
/*background-color: blue;*/
position: relative;
left: 0px;
top: 0px;
width: 300px;
height: 300px;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-webkit-animation: rotate-cube 15s linear infinite;
animation: rotate-cube 15s linear infinite;
}
.cubeface
{
position: absolute;
transition: all 600ms;
-webkit-transition: all 600ms;
top: 15px;
left: 15px;
width:200px;
height:200px;
opacity:0.7;
}
@keyframes rotate-cube
{
from
{
transform: rotateZ(0Deg) rotateY(0Deg);
}
to
{
transform: rotateZ(1080Deg) rotateY(360Deg);
}
}
@-webkit-keyframes rotate-cube
{
from
{
-webkit-transform: rotateZ(0Deg) rotateY(0Deg);
}
to
{
-webkit-transform: rotateZ(1080Deg) rotateY(360Deg);
}
}
#tile_bberry { transform: translateZ(150px); background:red; }
#tile_world { transform: translateX(150px) rotateY(90Deg); background:yellow; }
#tile_user { transform: translateX(-150px) rotateY(-90Deg); background:green; }
#tile_usb { transform: translateZ(-150px); background:blue; }
#tile_computer { transform: translateY(150px) rotateX(90Deg); background:purple; }
#tile_game { transform: translateY(-150px) rotateX(-90Deg); background:pink; }
:hover > #tile_bberry { transform: translateZ(250px); }
:hover > #tile_world { transform: translateX(250px) rotateY(90Deg); }
:hover > #tile_user { transform: translateX(-250px) rotateY(-90Deg); }
:hover > #tile_usb { transform: translateZ(-250px); }
:hover > #tile_computer { transform: translateY(250px) rotateX(90Deg); }
:hover > #tile_game { transform: translateY(-250px) rotateX(-90Deg); }
#tile_bberry { -webkit-transform: translateZ(150px); }
#tile_world { -webkit-transform: translateX(150px) rotateY(90Deg); }
#tile_user { -webkit-transform: translateX(-150px) rotateY(-90Deg); }
#tile_usb { -webkit-transform: translateZ(-150px); }
#tile_computer { -webkit-transform: translateY(150px) rotateX(90Deg); }
#tile_game { -webkit-transform: translateY(-150px) rotateX(-90Deg); }
:hover > #tile_bberry { -webkit-transform: translateZ(250px); }
:hover > #tile_world { -webkit-transform: translateX(250px) rotateY(90Deg); }
:hover > #tile_user { -webkit-transform: translateX(-250px) rotateY(-90Deg); }
:hover > #tile_usb { -webkit-transform: translateZ(-250px); }
:hover > #tile_computer { -webkit-transform: translateY(250px) rotateX(90Deg); }
:hover > #tile_game { -webkit-transform: translateY(-250px) rotateX(-90Deg); }
.screen-centered
{
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin-left: -50px;
margin-top: -50px;
}
.screen-left-column
{
float: left;
min-width: 290px;
width: 25%;
margin: 0px;
height: 100%;
}
.screen-centered-lc /*centered with left column*/
{
position: absolute;
top: 50%;
left: 0px;
width: 100%;
min-width: 1140px; /* 850 + 290 */
height: 850px;
margin-top: -425px;
}
.screen-main-container-lc /* centered with left column*/
{
display: inline-block;
position: relative;
height: 100%;
width: 850px;
}
div.tiled
{
position: absolute;
margin: 10px;
margin-top: 100px;
width: 270px;
height: 160px;
text-align: center;
}
.center
{
text-align: center;
}
</style>
</head>
<body>
<div class="stage screen-centered">
<div class="stage2">
<div class=" cube">
<img class="cubeface" id="tile_bberry"/>
<img class="cubeface" id="tile_world" />
<img class="cubeface" id="tile_user" />
<img class="cubeface" id="tile_usb" />
<img class="cubeface" id="tile_computer" />
<img class="cubeface" id="tile_game" />
</div>
</div>
</div>
</body>
</html>
