Не работает кроссбраузерно трансформация, в 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>
Простой
Простой
