如何利用CSS的scale3d()函数调整3D空间的元素缩放？scale3d()优化视觉呈现

scale3d()

scale3d()

scale3d(2, 0.5, 1)

.element {
  transform: scale3d(1.5, 0.8, 1); /* X轴放大1.5倍，Y轴缩小到0.8倍，Z轴不变 */
}

transition

.element {
  transform: scale3d(1, 1, 1); /* 初始状态 */
  transition: transform 0.3s ease-in-out; /* 添加过渡效果 */
}

.element:hover {
  transform: scale3d(1.2, 1.2, 1.2); /* 鼠标悬停时放大 */
}

<div class="card">
  <div class="card-inner">
    <div class="card-front">Front</div>
    <div class="card-back">Back</div>
  </div>
</div>

.card {
  width: 200px;
  height: 150px;
  perspective: 800px; /* 创建3D透视效果 */
}

.card-inner {
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d; /* 保持3D转换 */
  position: relative;
}

.card:hover .card-inner {
  transform: rotateY(180deg) scale3d(1.1, 1.1, 1.1); /* 翻转并放大 */
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 隐藏背面 */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

.card-back {
  background-color: lightblue;
  color: white;
  transform: rotateY(180deg); /* 初始时背面旋转180度 */
}

scale3d()

position: absolute

position: fixed

scale3d()

transform-origin

.element {
  position: absolute; /* 从文档流中移除 */
  transform: scale3d(2, 2, 1);
  transform-origin: top left; /* 从左上角开始缩放 */
}

scale3d()

.element {
  transform: scale3d(1, 1, 1);
  will-change: transform; /* 提前告知浏览器 */
  backface-visibility: hidden; /* 启用硬件加速 */
  transition: transform 0.3s ease-in-out;
}

.element:hover {
  transform: scale3d(1.2, 1.2, 1.2);
}

scale3d()

scaleX()

scaleY()

scaleZ()

scaleX()

scaleY()

scale3d()

scale3d(sx, sy, sz)

scaleX(sx) scaleY(sy) scaleZ(sz)

.element {
  /* 这两种写法效果相同 */
  transform: scale3d(1.5, 0.8, 1);
  transform: scaleX(1.5) scaleY(0.8) scaleZ(1);
}

scaleX()

scaleY()

scaleZ()