Задать вопрос
raba
@raba
...
верстка

Почему кроссбраузерно не работает трансформация?

Не работает кроссбраузерно трансформация, в Chrome все нормально, а в IE и FF - все печально.
Уже куча лишнего вставлена, что-то пропустил, не заметил или не знаю... помогите советом.
spoiler
<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 * { 
 -webkit-box-sizing: border-box; 
 box-sizing: border-box; 
 }
 .scene {
 width: 200px;
 height: 200px;
 margin: 80px;
 }
 .cube {
 width: 200px;
 height: 145px;
 position: relative;
 -webkit-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -webkit-transform: translateZ(-100px);
 transform: translateZ(-100px);
 -ms-transform: translateZ(-100px);
 -moz-transform: translateZ(-100px);
 -webkit-transition: -webkit-transform 1s;
 transition: -webkit-transform 1s;
 -moz-transition: -webkit-transform 1s;
 -o-transition: transform 1s;
 transition: transform 1s;
 transition: transform 1s, -webkit-transform 1s;
 -webkit-transform: rotateY(0deg) rotateX(-90deg);
 transform: rotateY(0deg) rotateX(-90deg);
 -ms-transform: rotateY(0deg) rotateX(-90deg);
 -moz-transform: rotateY(0deg) rotateX(-90deg);
 }
 .cube-face {
 position: absolute;
 width: 207px;
 height: 207px;
 background-repeat: no-repeat;
 background-image: url("img-front.png");
 background-color: red;
 background-size: cover;
 -webkit-transform: rotateY( 0deg) rotateX(90deg);
 -moz-transform: rotateY( 0deg) rotateX(90deg);
 transform: rotateY( 0deg) rotateX(90deg);
 -ms-transform: rotateY( 0deg) rotateX(90deg);
 border-radius: 50%;
 }
 .scene:hover .cube{ 
 -webkit-transform: rotateX( -60deg) rotateZ(20deg);
 -moz-transform: rotateX( -60deg) rotateZ(20deg);
 transform: rotateX( -60deg) rotateZ(20deg);
 -ms-transform: rotateX( -60deg) rotateZ(20deg);
 }
 .strip div {
 position: absolute;
 background: url("product-2.jpg"); 
 background-color: blue;
 height: 40px;
 width: 27px;
 opacity: 1;
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 bottom: 0;
 left: 88px;
 }
 .strip .a {
 background-position: 0 0;
 transform: rotateY(0deg) translateZ(100px);
 -ms-transform: rotateY(0deg) translateZ(100px);
 -moz-transform: rotateY(0deg) translateZ(100px);
 -webkit-transform: rotateY(0deg) translateZ(100px);
 }

 .strip .b {
 background-position: 759px 0;
 transform: rotateY(15deg) translateZ(100px);
 -ms-transform: rotateY(15deg) translateZ(100px);
 -moz-transform: rotateY(15deg) translateZ(100px);
 -webkit-transform: rotateY(15deg) translateZ(100px)
 }

 .strip .c {
 background-position: 726px 0;
 transform: rotateY(30deg) translateZ(100px);
 -ms-transform: rotateY(30deg) translateZ(100px);
 -moz-transform: rotateY(30deg) translateZ(100px);
 -webkit-transform: rotateY(30deg) translateZ(100px)
 }

 .strip .d {background-position: 693px 0;
  transform: rotateY(45deg) translateZ(100px);
  -ms-transform: rotateY(45deg) translateZ(100px);
  -moz-transform: rotateY(45deg) translateZ(100px);
  -webkit-transform: rotateY(45deg) translateZ(100px)}	

 .strip .e {background-position: 660px 0;
  transform: rotateY(60deg) translateZ(100px);
  -ms-transform: rotateY(60deg) translateZ(100px);
  -moz-transform: rotateY(60deg) translateZ(100px);
  -webkit-transform: rotateY(60deg) translateZ(100px)}	

 .strip .f {background-position: 627px 0;
  transform: rotateY(75deg) translateZ(100px);
  -ms-transform: rotateY(75deg) translateZ(100px);
  -moz-transform: rotateY(75deg) translateZ(100px);
  -webkit-transform: rotateY(75deg) translateZ(100px)}

 .strip .g {background-position: 594px 0;
  transform: rotateY(90deg) translateZ(100px);
  -ms-transform: rotateY(90deg) translateZ(100px);
  -moz-transform: rotateY(90deg) translateZ(100px);
  -webkit-transform: rotateY(90deg) translateZ(100px)}

 .strip .h {background-position: 561px 0;
  transform: rotateY(105deg) translateZ(100px);
  -ms-transform: rotateY(105deg) translateZ(100px);
  -moz-transform: rotateY(105deg) translateZ(100px);
  -webkit-transform: rotateY(105deg) translateZ(100px)}	

 .strip .i {background-position: 528px 0;
  transform: rotateY(120deg) translateZ(100px);
  -ms-transform: rotateY(120deg) translateZ(100px);
  -moz-transform: rotateY(120deg) translateZ(100px);
  -webkit-transform: rotateY(120deg) translateZ(100px)}	

 .strip .j {background-position: 495px 0;
  transform: rotateY(135deg) translateZ(100px);
  -ms-transform: rotateY(135deg) translateZ(100px);
  -moz-transform: rotateY(135deg) translateZ(100px);
  -webkit-transform: rotateY(135deg) translateZ(100px)}

 .strip .k {background-position: 462px 0;
  transform: rotateY(150deg) translateZ(100px);
  -ms-transform: rotateY(150deg) translateZ(100px);
  -moz-transform: rotateY(150deg) translateZ(100px);
  -webkit-transform: rotateY(150deg) translateZ(100px)}

 .strip .l {background-position: 429px 0;
  transform: rotateY(165deg) translateZ(100px);
  -ms-transform: rotateY(165deg) translateZ(100px);
  -moz-transform: rotateY(165deg) translateZ(100px);
  -webkit-transform: rotateY(165deg) translateZ(100px)}	

 .strip .m {background-position: 396px 0;
  transform: rotateY(180deg) translateZ(100px);
  -ms-transform: rotateY(180deg) translateZ(100px);
  -moz-transform: rotateY(180deg) translateZ(100px);
  -webkit-transform: rotateY(180deg) translateZ(100px)}		

 .strip .n {background-position: 363px 0;
  transform: rotateY(195deg) translateZ(100px);
  -ms-transform: rotateY(195deg) translateZ(100px);
  -moz-transform: rotateY(195deg) translateZ(100px);
  -webkit-transform: rotateY(195deg) translateZ(100px)}

 .strip .o {background-position: 330px 0;
  transform: rotateY(210deg) translateZ(100px);
  -ms-transform: rotateY(210deg) translateZ(100px);
  -moz-transform: rotateY(210deg) translateZ(100px);
  -webkit-transform: rotateY(210deg) translateZ(100px)}

 .strip .p {background-position: 297px 0;
  transform: rotateY(225deg) translateZ(100px);
  -ms-transform: rotateY(225deg) translateZ(100px);
  -moz-transform: rotateY(225deg) translateZ(100px);
  -webkit-transform: rotateY(225deg) translateZ(100px)}	

 .strip .q {background-position: 264px 0;
  transform: rotateY(240deg) translateZ(100px);
  -ms-transform: rotateY(240deg) translateZ(100px);
  -moz-transform: rotateY(240deg) translateZ(100px);
  -webkit-transform: rotateY(240deg) translateZ(100px)}	

 .strip .r {background-position: 231px 0;
  transform: rotateY(255deg) translateZ(100px);
  -ms-transform: rotateY(255deg) translateZ(100px);
  -moz-transform: rotateY(255deg) translateZ(100px);
  -webkit-transform: rotateY(255deg) translateZ(100px)}

 .strip .s {background-position: 198px 0;
  transform: rotateY(270deg) translateZ(100px);
  -ms-transform: rotateY(270deg) translateZ(100px);
  -moz-transform: rotateY(270deg) translateZ(100px);
  -webkit-transform: rotateY(270deg) translateZ(100px)}

 .strip .t {background-position: 165px 0;
  transform: rotateY(285deg) translateZ(100px);
  -ms-transform: rotateY(285deg) translateZ(100px);
  -moz-transform: rotateY(285deg) translateZ(100px);
  -webkit-transform: rotateY(285deg) translateZ(100px)}	

 .strip .u {background-position: 132px 0;
  transform: rotateY(300deg) translateZ(100px);
  -ms-transform: rotateY(300deg) translateZ(100px);
  -moz-transform: rotateY(300deg) translateZ(100px);
  -webkit-transform: rotateY(300deg) translateZ(100px)}	

 .strip .v {background-position: 99px 0;
  transform: rotateY(315deg) translateZ(100px);
  -ms-transform: rotateY(315deg) translateZ(100px);
  -moz-transform: rotateY(315deg) translateZ(100px);
  -webkit-transform: rotateY(315deg) translateZ(100px)}

 .strip .w {background-position: 66px 0;
  transform: rotateY(330deg) translateZ(100px);
  -ms-transform: rotateY(330deg) translateZ(100px);
  -moz-transform: rotateY(330deg) translateZ(100px);
  -webkit-transform: rotateY(330deg) translateZ(100px)}

 .strip .x {background-position: 33px 0;
  transform: rotateY(345deg) translateZ(100px);
  -ms-transform: rotateY(345deg) translateZ(100px);
  -moz-transform: rotateY(345deg) translateZ(100px);
  -webkit-transform: rotateY(345deg) translateZ(100px)}
 </style>
 </head>
 <body>
 <div class="scene">
 <div class="cube">
 <div class="cube-face"></div>
 <div class="strip">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
  <div class="d"></div>
  <div class="e"></div>
  <div class="f"></div>
  <div class="g"></div>
  <div class="h"></div>
  <div class="i"></div>
  <div class="j"></div>
  <div class="k"></div>
  <div class="l"></div>
  <div class="m"></div>
  <div class="n"></div>
  <div class="o"></div>
  <div class="p"></div>
  <div class="q"></div>
  <div class="r"></div>
  <div class="s"></div>
  <div class="t"></div>
  <div class="u"></div>
  <div class="v"></div>
  <div class="w"></div>
  <div class="x"></div>

 </div>
 </div>
 </div>
 </body>
</html>
  • Вопрос задан
  • 89 просмотров
4 комментария
Подписаться 1 Средний 4 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend Vue & Capacitor Developer Middle++
Parasol Software
от 2 000 до 2 500 $
Frontend программист-разработчик
Максавит • Нижний Новгород
До 200 000 ₽
PHP-программист (SEO-правки)
Demis Group
от 50 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработка страницы блога на сайте на WordPress
24 апр. 2024, в 17:00
1000 руб./в час
Создание промо картинок мобильного приложения
24 апр. 2024, в 16:42
10000 руб./за проект
Визуальные в фронтенд WebApp телеграмм бота
24 апр. 2024, в 16:35
5000 руб./за проект
Ещё заказы