Dhruv Chadha Dhruv Chadha - 6 months ago 16
CSS Question

Why translateZ working not working on hover?

When I hover over the image, the transition works fine except for the fact that the front image (that of a rotating lock) only translates 20px in Z direction when the mouse is removed from that image. I want the rotating lock image to be 20px in front always.

Also, why does the rotating lock image becomes slightly smaller just after I hover the image?



body {
margin:0;
width: 100%;
height: 100%;
}

.maincircle {
width: 200px;
height: 200px;
position: relative;
margin-left: 200px;
margin-top: 10px;
border-radius: 50%;
border: 1px solid black;
perspective: 600px;
transform-style: preserve-3d;
}
.door {
background-color: gray;
border-radius: 100%;
height: 200px;
margin: 0;
position: relative;
width: 200px;
transition: .5s linear;
transform-style: preserve-3d;
transform-origin: 0 50%;
transition: transform 2s 0.5s;
}

.door:before {
background-color: gray;
background-image: linear-gradient(hsla(0,0%,100%,.25), hsla(0,0%,0%,.25));
border-radius: 100%;
content: '';
height: 200px;
left: 0;
position: absolute;
top: 0;
width: 200px;
transform: translateZ(-5px);
}

.door:after {
background-color: gray;
background-image: linear-gradient(hsla(0,0%,100%,.25), hsla(0,0%,0%,.25));
bottom: 0;
content: '';
left: 100px;
position: absolute;
top: 0;
width: 5px;
z-index: -10;
transform: rotateY(-90deg);
transform-origin: 100% 50%;
}

.maincircle:hover .door {
transform: rotateY(-110deg);
}

.maincircle:hover .locker {
transform: rotate(90deg);
}

.locker {
background-image: url("https://irp-cdn.multiscreensite.com/806e9122/dms3rep/multi/tablet/CombinationLock-1000x1000.png");
position: absolute;
top: 25px;
left: 25px;
background-size: 100% 100%;
border-radius: 100%;
width: 150px;
height: 150px;
transform: translateZ(20px);
transition: transform 0.5s;
}

<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="maincircle">
<div class="door">
<div class="locker"></div>
</div>
</div>
</body>
</html>




Answer

Question 1: (I want the rotating lock image to be 20px in front always)

It is because transform settings are not additive in nature. When you specify the transform during the :hover as give below,

.maincircle:hover .locker {
  transform: rotate(90deg);
}

it overwrites the transform: translateZ(20px) that is specified within the default state (which is the setting under .locker selector) and so the translation in Z-axis is lost whenever the element is being hovered. It gets applied back only when the :hover is off (that is, the element returns to default state as specified in .locker selector).

In order to always have the translation in Z-axis, translateZ(20px) should be added to the transform stack within :hover selector also like below:

.maincircle:hover .locker {
  transform: rotate(90deg) translateZ(20px);
}

body {
  margin:0;
  width: 100%;
  height: 100%;
}

.maincircle {
  width: 200px;
  height: 200px;
  position: relative;
  margin-left: 200px;
  margin-top: 10px;
  border-radius: 50%;
  border: 1px solid black;
  perspective: 600px;
  transform-style: preserve-3d; 
}
.door {
  background-color: gray;
  border-radius: 100%;
  height: 200px;
  margin: 0;
  position: relative;
  width: 200px;
  transition: .5s linear;
  transform-style: preserve-3d;
  transform-origin: 0 50%;
  transition: transform 2s 0.5s;
}

.door:before {
  background-color: gray;
  background-image: linear-gradient(hsla(0,0%,100%,.25), hsla(0,0%,0%,.25));
  border-radius: 100%;
  content: '';
  height: 200px;
  left: 0;
  position: absolute;
  top: 0;
  width: 200px;
  transform: translateZ(-5px);
}

.door:after {
  background-color: gray;
  background-image: linear-gradient(hsla(0,0%,100%,.25), hsla(0,0%,0%,.25));
  bottom: 0;
  content: '';
  left: 100px;
  position: absolute;
  top: 0;
  width: 5px;
  z-index: -10;
  transform: rotateY(-90deg);
  transform-origin: 100% 50%;
}

.maincircle:hover .door {
  transform: rotateY(-110deg);
}

.maincircle:hover .locker {
  transform: rotate(90deg) translateZ(20px);
}

.locker {
  background-image: url("https://irp-cdn.multiscreensite.com/806e9122/dms3rep/multi/tablet/CombinationLock-1000x1000.png"); 
  position: absolute;
  top: 25px;
  left: 25px;
  background-size: 100% 100%;
  border-radius: 100%;
  width: 150px;
  height: 150px;
  transform: translateZ(20px);
  transition: transform 0.5s;
}
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="maincircle">
      <div class="door">
        <div class="locker"></div>
      </div>
    </div>
  </body>
</html>


Question 2: (Why does the rotating lock image becomes slightly smaller just after I hover the image?)

I am putting this at the last (even below the code) because I know by now you'd have guessed why it became smaller. It becomes smaller because the element is losing the translateZ(20px) and so it is going farther away from your eye. Any object that goes farther away from the eye will look smaller.

Comments