3D куб корректно работает в браузерах: Хром, Мозила, Опера
Код HTML:
<!DOCTYPE html><!--html5-->
<html lang="ru"><!--html для русских-->
<head><!--метаданные страницы-->
<meta charset="utf-8"/><!--кодировка-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--><!--для IE правильный скрипт-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><!--предпочтения браузера-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"><!--начальный масштаб для не адаптивных страниц-->
<META NAME="AUTHOR" CONTENT="Alexander Kosolapov"><!--автор страницы-->
<title>3D куб</title><!--имя страницы-->
<meta name="description" content="мой куб"/><!--для поисковых систем-->
<link rel="stylesheet" type="text/css" href="css/style3Dcub.css"/><!--подключение стилей-->
<STYLE TYPE="text/css">
<!--
@page { margin: 0.5in }
P { margin-bottom: 0.08in; direction: ltr; widows: 2; orphans: 2 }
A:link { color: #0000ff; so-language: zxx }
-->
</STYLE>
</head><!--/метатеги-->
<body><!--тело страницы-->
<div id="box"><!--контейнер-->
<div id="wrapper"><!--блок перспективы-->
<div id="cube"><!--блок куба вращения-->
<div class="side" id="side1">intergroup</div><!--сторона 1-->
<div class="side" id="side2">intergroup</div><!--сторона 2-->
<div class="side" id="side3">intergroup</div><!--сторона 3-->
<div class="side" id="side4">intergroup</div><!--сторона 4-->
<div class="side" id="side5">intergroup</div><!--сторона 5-->
<div class="side" id="side6">intergroup</div><!--сторона 6-->
</div><!--/блок куба вращения-->
</div><!--/блок перспективы-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><!--подключение библиотеки jquery-->
<script><!--скрипт трансформации-->
$(function(){
$(document).mousemove(function(e){
$('#cube').css({
'-moz-transform':'rotateX('+e.pageY+'deg) rotateY('+e.pageX+'deg)'
});
$('#cube').css({
'-webkit-transform':'rotateX('+e.pageY+'deg) rotateY('+e.pageX+'deg)'
});
$('#cube').css({
'-o-transform':'rotateX('+e.pageY+'deg) rotateY('+e.pageX+'deg)'
});
});
});
</script><!--/скрипт-->
</div><!--закрытие контейнер-->
</body><!--/тело страницы-->
</html><!--/html-->
Код CSS:
@charset "utf-8";
#box{/*контейнер для куба*/
background-color:rgba(204,204,204,.5);/*фон*/
border-radius:5px;/*радиус округления краев*/
margin:.5em;/*внешние отступы*/
padding:2em;/*внутренние отступы*/
position:absolute;/*позиционирование абсолютное*/
z-index:1;/*слой 1*/
}
#wrapper{/*блок перспективы*/
-webkit-perspective:270px;/*перспектива вращения для хрома*/
-moz-perspective:270px;/*перспектива вращения для мозилы*/
-o-perspective:270px;/*перспектива вращения для оперы*/
}
#cube{
position:relative;/*относительное позиционирование куба*/
width:90px;/*длина сторон куба*/
height:90px;/*высота сторон куба*/
transform-origin:50% 50% -45px;/*кординаты точки трансформации куба относительно центра x y z-половина грани куба*/
-webkit-transform-origin:50% 50% -45px;/*кординаты точки трансформации куба для хрома*/
-moz-transform-origin:50% 50% -45px;/*кординаты точки трансформации для мозилы*/
-o-transform-origin:50% 50% -45px;/*кординаты точки трансформации для оперы*/
transform-style:preserve-3d;/*отображение в 3D*/
-webkit-transform-style:preserve-3d;/*отображение в 3D для хрома*/
-moz-transform-style:preserve-3d;/*отображение в 3D для мозилы*/
-o-transform-style:preserve-3d;/*отображение в 3D для оперы*/
}
.side{/*стороны куба*/
width:90px;/*длина сторон куба*/
height:90px;/*высота сторон куба*/
background:radial-gradient(rgba(21,53,176,.5) 50%,
rgba(50,126,213,.5)100%);/*радиальные градиенты и тени сторон куба*/
background:-webkit-radial-gradient(rgba(21,53,176,.5) 50%,
rgba(50,126,213,.5)100%);/*для хрома*/
background:-moz-radial-gradient(rgba(21,53,176,.5) 50%,
rgba(50,126,213,.5)100%);/*для мозилы*/
background:-o-(rgba(21,53,176,.5) 50%,
rgba(50,126,213,.5)100%);/*для оперы*/
position:absolute;/*абсолютное позиционирование сторон куба*/
border:1px solid #fff;/*белый бордюр*/
border-radius:5px;/*округление*/
font-size:1.2em;/*ширина шрифта на сторонах*/
color:#fff;/*цвет шрифта*/
line-height:90px;/*межстрочный интервал*/
text-align:center;/*выравнивание текста по центру*/
text-shadow:0 1px 3px rgba(0,0,0,.8);/*свойства тени текста*/
box-shadow:0 0 6px rgba(0,0,0,.9);/*свойства тени бокса*/
transform-origin:50% 50% -45px;/*кординаты точки трансформации x y z-половина грани куба*/
-moz-transform-origin:50% 50% -45px;/*кординаты точки трансформации для мозилы*/
-webkit-transform-origin:50% 50% -45px;/*кординаты точки трансформации для хрома*/
-o-transform-origin:50% 50% -45px;/*кординаты точки трансформации для оперы*/
}
#side2{/*сторона 2 левая*/
transform:rotateY(90deg);/*вращение стороны по оси Y на 90 градусов*/
-moz-transform:rotateY(90deg);/*для мозилы*/
-webkit-transform:rotateY(90deg);/*для хрома*/
-o-transform:rotateY(90deg);/*для оперы*/
}
#side3{/*сторона 3 правая*/
transform:rotateY(-90deg);/*вращение стороны по оси Y на -90 градусов*/
-moz-transform:rotateY(-90deg);/*для мозилы*/
-webkit-transform:rotateY(-90deg);/*хрома*/
-o-transform:rotateY(-90deg);/*для оперы*/
}
#side4{/*сторона 4 нижняя*/
transform:rotateX(90deg);/*вращение стороны по оси x на 90 градусов*/
-moz-transform:rotateX(90deg);/*для мозилы*/
-webkit-transform:rotateX(90deg);/*для хрома*/
-o-transform:rotateX(90deg);/*для оперы*/
}
#side5{/*сторона 5 верхняя*/
transform:rotateX(-90deg);/*вращение стороны по оси x на 90 градусов*/
-moz-transform:rotateX(-90deg);/*для мозилы*/
-webkit-transform:rotateX(-90deg);/*для хрома*/
-o-transform:rotateX(-90deg);/*для оперы*/
}
#side6{/*сторона 6*/
transform:rotateY(180deg);/*вращение стороны по оси y на 180 градусов*/
-moz-transform:rotateY(180deg);/*для мозилы*/
-webkit-transform:rotateY(180deg);/*для хрома*/
-o-transform:rotateY(180deg);/*для оперы*/
}