为什么 translateZ 在悬停时不工作？

Question

当我将鼠标悬停在图像上时，转换工作正常，除了当鼠标从该图像上移开时前图像（旋转锁的图像）仅在 Z 方向平移 20 像素。我希望旋转锁图像总是在前面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);
}

.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 1

问题一：（我希望旋转锁图片总是在前面20px）

这是因为 transform 设置本质上不是附加的。当您在 :hover 期间指定 transform 时，如下所示，

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

它覆盖默认状态下指定的transform: translateZ(20px)（即[=18=下的设置） ] 选择器），因此每当悬停元素时，Z 轴的平移就会丢失。它仅在 :hover 关闭时应用回来（即元素 returns 到 .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>

问题2：（为什么刚悬停旋转锁图片就变小了？）

我把它放在最后（甚至在代码下面），因为我知道你现在已经猜到为什么它变小了。它变小了，因为元素正在失去 translateZ(20px)，所以它 离你的眼睛更远 。任何物体离眼睛越远，看起来就会越小。

为什么 translateZ 在悬停时不工作？

Why translateZ working not working on hover?

css

css-transforms