CSS 3D变换,transform:translateZ()

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>
相关推荐
小小小小宇6 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊6 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习7 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖7 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖7 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水8 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐8 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06278 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台8 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121388 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css