Categories

JavaScriptPHPHTMLCssPythonWordPressWeb developmentLinuxMySQLAndroidWindowsJavaC++ / C#LayoutReactUbuntuYiiDjangoProgramming1C-BitrixLaravelSystem administrationTelegramJSONDebianPostgreSQLIOSGoogleHtaccessWindows ServerGitMacOSGoogle ChromeCMSWooСommerceBootstrapNginxSQLUnityAPI
Make a leaderReport
A
A
Andrey Raboy2019-12-09 17:30:10
Layout
Andrey Raboy, 2019-12-09 17:30:10

Why doesn't transformation work cross-browser?

Cross-browser transformation does not work, in Chrome everything is fine, but in IE and FF everything is sad.
A lot of extra stuff has already been inserted, I missed something, didn’t notice or don’t know ... help with advice.

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>

Reply
Answer the question

Answer the question

In order to leave comments, you need to log in

0 answer(s)
Similar questions
A
aenoki2015-04-13 11:56:42
HAProxy: checking backend on different ports? 2Reply
B
beaverBox2015-04-22 15:37:39
How to get printer serial number programmatically? 1Reply
M
MelPoks2019-09-26 14:47:31
Through which service to sell the site? 10Reply
N
Nikita072021-04-08 14:53:50
What is the correct way to set the inject level of an ILogger? 2Reply
A
Andrew2019-10-17 12:09:37
Is it possible to change the axios config without reloading the script? 3Reply

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question