0

I came across this HTML / CSS3 code for a CSS3 3D Transform Cube Rotation Effect, written in 2012 (see: http://www.inwebson.com/css3/css3-3d-transforms-animation-cube-rotation/).

I've set it up as a Pen: https://codepen.io/Ben10/pen/MGbYEe

body {
  margin: 0;
  padding: 0;
}

section {
  display: block;
}

#wrapper {
  width: 600px;
  margin: 200px auto 100px;
  position: relative;
}


/*** View Stage ***/

#viewStage {
  width: 450px;
  height: 300px;
  margin: 5em auto;
  -webkit-perspective: 450px;
  -webkit-perspective-origin: 50% 50%;
}


/*** Keyframes ***/

@-webkit-keyframes rotation {
  from,
  to {}
  10%,
  25% {
    -webkit-transform: rotateX(-90deg);
  }
  35%,
  50% {
    -webkit-transform: rotateX(-180deg);
  }
  60%,
  75% {
    -webkit-transform: rotateX(-270deg);
  }
  85%,
  100% {
    -webkit-transform: rotateX(-360deg);
  }
}

@-moz-keyframes rotation {
  from,
  to {}
  10%,
  25% {
    -moz-transform: translateY(0px);
  }
  35%,
  50% {
    -moz-transform: translateY(-300px);
  }
  60%,
  75% {
    -moz-transform: translateY(-600px);
  }
  85%,
  100% {
    -moz-transform: translateY(-900px);
  }
}


/*** Cube ***/

.cube {
  position: relative;
  float: left;
  width: 150px;
  height: 300px;
  /* Transform */
  -webkit-transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
  /* Animation */
  -webkit-animation-name: rotation;
  -webkit-animation-timing-function: ease;
  -webkit-animation-timing-function: cubic-bezier(0.6, -1, 0.4, 1.5);
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 15s;
  -moz-animation-name: rotation;
  -moz-animation-timing-function: ease;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 15s;
}


/* Cube delay and z-index fix */

#cube1 {
  z-index: 1;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
}

#cube2 {
  z-index: 2;
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
}

#cube3 {
  z-index: 1;
  -webkit-animation-delay: 1.4s;
  -moz-animation-delay: 1.4s;
}


/*** Cube's face Style ***/

.cube div {
  background-color: #000;
  background-size: 450px 300px;
  position: absolute;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
}

.cube div.fb {
  width: 150px;
  height: 300px;
}

.cube div.tb {
  width: 150px;
  height: 300px;
}

.cube div.lr {
  width: 300px;
  height: 300px;
}


/* Face image and position */

.facefront {
  background-image: url(https://picsum.photos/600/400?image=1080);
  -webkit-transform: translateZ(150px);
  -moz-transform: translateY(0px);
}

.faceback {
  background-image: url(https://picsum.photos/600/400?image=977);
  -webkit-transform: rotateY(180deg) rotateZ(180deg) translateZ(150px);
  -moz-transform: translateY(300px);
}

.facetop {
  background-image: url(https://picsum.photos/600/400?image=861);
  -webkit-transform: rotateX(90deg) translateZ(150px);
  -moz-transform: translateY(600px);
}

.facebottom {
  background-image: url(https://picsum.photos/600/400?image=696);
  -webkit-transform: rotateX(-90deg) translateZ(150px);
  -moz-transform: translateY(900px);
}

.faceleft {
  background-color: #000;
  -webkit-transform: rotateY(90deg) translateZ(0px);
  -moz-transform: scaleX(0);
}

.faceright {
  background-color: #000;
  -webkit-transform: rotateY(-90deg) translateZ(150px);
  -moz-transform: scaleX(0);
}

#cube1 div {
  background-position: 0 0;
}

#cube2 div {
  background-position: -150px 0;
}

#cube3 div {
  background-position: -300px 0;
}
<section id="wrapper">

  <div id="viewStage">
    <div id="cube1" class="cube">
      <div class="facefront fb"></div>
      <div class="faceback fb"></div>
      <div class="faceleft lr"></div>
      <div class="faceright lr"></div>
      <div class="facetop tb"></div>
      <div class="facebottom tb"></div>
    </div>
    <div id="cube2" class="cube">
      <div class="facefront fb"></div>
      <div class="faceback fb"></div>
      <div class="faceleft lr"></div>
      <div class="faceright lr"></div>
      <div class="facetop tb"></div>
      <div class="facebottom tb"></div>
    </div>
    <div id="cube3" class="cube">
      <div class="facefront fb"></div>
      <div class="faceback fb"></div>
      <div class="faceleft lr"></div>
      <div class="faceright lr"></div>
      <div class="facetop tb"></div>
      <div class="facebottom tb"></div>
    </div>
  </div>

</section>

The effect displays fine in Chrome but not so good in Firefox.

I've messed around a bit with the CSS but can't get it to work.

It seems that Firefox (from version 58 up) now supports CSS3 3D transforms (https://caniuse.com/#search=CSS3%203D).

So my question is, if Firefox now supports CSS3 3D Transforms, why doesn't this animation display correctly in Firefox?

3
  • Use non-prefixed styles
    – vals
    Apr 27, 2018 at 5:45
  • The example you gave has two different styles for mozilla and chrome. That's why there is different effect in different browsers. Apr 27, 2018 at 5:46
  • @Laxmikant Dange Stupidly I didn't notice the different styles for Mozilla and Chrome. I've removed the vendor prefixes and the Mozilla styles and all good in both browsers. Thanks for your tip!
    – Mekong
    Apr 30, 2018 at 3:00

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.