要使用transform: scale()创建3D效果，可以使用transform-style: preserve-3d属性来启用元素的3D空间。然后，可以使用transform: translate3d()和transform: rotate3d()等属性来进行3D变换，再使用transform: scale()来对元素进行缩放操作。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Transform Scale 3D Effect</title>
<style>
.container {
width: 300px;
height: 300px;
perspective: 1000px;
}
.box {
width: 100px;
height: 100px;
background-color: red;
transform-style: preserve-3d;
transform: translate3d(0, 0, 50px) rotate3d(1, 1, 1, 45deg) scale(0.5);
transition: transform 1s ease-in-out;
}
.box:hover {
transform: translate3d(0, 0, 100px) rotate3d(1, 1, 1, 90deg) scale(1);
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>在上面的代码中，我们创建了一个名为container的<div>元素作为3D空间的容器，并设置了perspective属性来控制观察者和物体之间的距离。然后，我们创建了一个名为box的<div>元素，并使用transform-style: preserve-3d属性启用了元素的3D空间。接着，我们使用translate3d()和rotate3d()属性对元素进行3D变换，最后使用scale()属性对元素进行缩放操作。
在这个示例中，我们还添加了一个鼠标悬停的效果，当鼠标悬停在元素上时，元素将进行另一组3D变换，从而产生动画效果。
总之，通过使用transform: scale()以及其他的3D变换属性，我们可以轻松地创建出令人惊叹的3D效果。
正文完