how to use transform: rotate as hover? - html

Question

I am trying to rotate 3 divs (cubes) on a hover state but it seems that not every browser can handle this. Only IE Edge without problem.
Firefox works great with the first 2 divs on hover but the cube disappears when hovering on the 3rd.
Chrome starts shaking all the cubes when hovering.
Is there something wrong in my code?
.cube-a,
.cube-b,
.cube-c {
margin-top: 100px;
margin-left: 10px;
float: left;
margin-right: 80px;
width: 100px;
height: 100px;
transform-style: preserve-3d;
transform: rotateX(108deg) rotateY(16deg) rotateZ(192deg);
}
.cube-a .tcface,
.cube-b .tcface,
.cube-c .tcface {
width: 100%;
height: 100%;
position: absolute;
}
.cube-a .cube-a-face {
background-color: #f4e00d;
/* geel */
transform: rotateX(90deg) rotatez(180deg) translateY(-50px) translateZ(50px);
height: 100px;
}
.cube-b .cube-b-face {
background-color: #8db63c;
/* groen */
transform: rotateX(90deg) rotatez(180deg) translateY(-50px) translateZ(50px);
height: 100px;
}
.cube-c .cube-c-face {
background-color: #009de0;
/* blauw */
transform: rotateX(90deg) rotatez(180deg) translateY(-50px) translateZ(50px);
height: 100px;
}
.cube-a .cube-a-right,
.cube-c .cube-c-right {
background-color: #8db63c;
/* groen */
transform: rotateY(-90deg) rotateZ(90deg) translateY(-100px);
transform-origin: 0 0;
width: 100px;
height: 100px;
}
.cube-b .cube-b-right {
background-color: #f4e00d;
/* geel */
transform: rotateY(-90deg) rotateZ(90deg) translateY(-100px);
transform-origin: 0 0;
width: 100px;
height: 100px;
}
.cube-a .cube-a-bottom,
.cube-b .cube-b-bottom {
background-color: #009de0;
/* blauw */
}
.cube-c .cube-c-bottom {
background-color: #f4e00d;
/* geel */
}
.cube-a-bottom,
.cube-b-bottom {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
}
.cube-a-face,
.cube-a-right,
.cube-a-bottom,
.cube-b-face,
.cube-b-right,
.cube-b-bottom,
.cube-c-face,
.cube-c-right,
.cube-c-bottom {
color: #fff;
text-align: center;
line-height: 100px;
font-size: 92px;
font-weight: 500;
font-family: "Simply Rounded Bold";
}
.cube-a:hover,
.cube-b:hover,
.cube-c:hover {
-webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg);
-moz-transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg);
-ms-transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg);
-o-transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg);
}
<div class="cube-a">
<div class="tcface cube-a-face">A</div>
<div class="tcface cube-a-right">B</div>
<div class="tcface cube-a-bottom">C</div>
</div>
<div class="cube-b">
<div class="tcface cube-b-face">B</div>
<div class="tcface cube-b-right">A</div>
<div class="tcface cube-b-bottom">C</div>
</div>
<div class="cube-c">
<div class="tcface cube-c-face">C</div>
<div class="tcface cube-c-right">B</div>
<div class="tcface cube-c-bottom">A</div>
</div>
Here is my fiddle:
https://jsfiddle.net/8vuj7peb/100/

Answer 1

Try adding -webkit-transition: all 1s; and transition: all 1s;. This is the transition property, making the transition 1s long.
.cube-a,
.cube-b,
.cube-c {
margin-top: 100px;
margin-left: 10px;
float: left;
margin-right: 80px;
width: 100px;
height: 100px;
transform-style: preserve-3d;
transform: rotateX(108deg) rotateY(16deg) rotateZ(192deg);
-webkit-transition: all 1s; /* Safari */
transition: all 1s;
}
.cube-a .tcface,
.cube-b .tcface,
.cube-c .tcface {
width: 100%;
height: 100%;
position: absolute;
}
.cube-a .cube-a-face {
background-color: #f4e00d;
/* geel */
transform: rotateX(90deg) rotatez(180deg) translateY(-50px) translateZ(50px);
height: 100px;
}
.cube-b .cube-b-face {
background-color: #8db63c;
/* groen */
transform: rotateX(90deg) rotatez(180deg) translateY(-50px) translateZ(50px);
height: 100px;
}
.cube-c .cube-c-face {
background-color: #009de0;
/* blauw */
transform: rotateX(90deg) rotatez(180deg) translateY(-50px) translateZ(50px);
height: 100px;
}
.cube-a .cube-a-right,
.cube-c .cube-c-right {
background-color: #8db63c;
/* groen */
transform: rotateY(-90deg) rotateZ(90deg) translateY(-100px);
transform-origin: 0 0;
width: 100px;
height: 100px;
}
.cube-b .cube-b-right {
background-color: #f4e00d;
/* geel */
transform: rotateY(-90deg) rotateZ(90deg) translateY(-100px);
transform-origin: 0 0;
width: 100px;
height: 100px;
}
.cube-a .cube-a-bottom,
.cube-b .cube-b-bottom {
background-color: #009de0;
/* blauw */
}
.cube-c .cube-c-bottom {
background-color: #f4e00d;
/* geel */
}
.cube-a-bottom,
.cube-b-bottom {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
}
.cube-a-face,
.cube-a-right,
.cube-a-bottom,
.cube-b-face,
.cube-b-right,
.cube-b-bottom,
.cube-c-face,
.cube-c-right,
.cube-c-bottom {
color: #fff;
text-align: center;
line-height: 100px;
font-size: 92px;
font-weight: 500;
font-family: "Simply Rounded Bold";
}
.cube-a:hover,
.cube-b:hover,
.cube-c:hover {
-webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg);
-moz-transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg);
-ms-transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg);
-o-transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg);
}
<div class="cube-a">
<div class="tcface cube-a-face">A</div>
<div class="tcface cube-a-right">B</div>
<div class="tcface cube-a-bottom">C</div>
</div>
<div class="cube-b">
<div class="tcface cube-b-face">B</div>
<div class="tcface cube-b-right">A</div>
<div class="tcface cube-b-bottom">C</div>
</div>
<div class="cube-c">
<div class="tcface cube-c-face">C</div>
<div class="tcface cube-c-right">B</div>
<div class="tcface cube-c-bottom">A</div>
</div>