Geek Answers Handbook

Why does translateZ not hang?

When I hovered the cursor over the image, the transition works fine, except that the front image (rotating lock) only moves 20 pixels in the Z direction when the mouse is removed from this image. I want the spinning lock image to always be 20 pixels in front.

Also, why does the spinning lock image get a little smaller right after I find 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>
Run codeHide result
+4
source share
1 answer

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

, transform . transform :hover ,

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

transform: translateZ(20px), ( ​​ .locker), Z , , , :hover ( , .locker).

Z, translateZ(20px) :hover, :

.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>
Hide result

2: ( , ?)

( ), , , . , translateZ(20px), . , , .

+4

More articles:


All Articles