transform:translateZ()是CSS 3D变换中的一个属性,用于控制元素在Z轴(前后方向)上的移动
功能:将元素沿Z轴(垂直于屏幕的方向)移动指定距离
translateZ(10px)=》元素向观察者方向凸起(靠近你)
translateZ(-50px)=》元素向屏幕内部凹陷(远离你)
视觉效果:
当元素在Z轴上移动时,会因透视(perspective)产生近大远小的立体效果
需要父元素或祖先元素设置perspective属性才能看到3D效果,否则无变化
关键点说明:
perspective的必要性:
父容器必须设置透视(如:perspective:500px),否则translateZ()的3D效果无法显现
perspective的值越小,3D效果越夸张(类似于广角镜头);值越大,效果越平缓
!注意,多次使用3D效果,会加重GPU性能
下面见代码:(实现类似的还可以直接使用transform: scale(1.1); /* 鼠标悬停时放大 */一样可以实现类似的效果)
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="margin-left: 100px;margin-top: 100px;">
<img src="./left.png">
</div>
</body>
<style>
body{
perspective: 500px; /* 必须设置透视距离 */
}
div{
height: 400px;
width: 200px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* 初始阴影 */
cursor: pointer;
transition: box-shadow 0.3s ease, transform 0.3s ease; /* 添加过渡效果 */
}
div:hover{
box-shadow: 0 8px 20px rgba(0, 0, 0, 1); /* 鼠标悬停时的阴影 */
transform: translateZ(10px); /* 在 Z 轴上凸起 */
}
</style>
</html>