QML 3D 倾斜卡片：用 2D 变换模拟悬浮透视

目录

• • 演示效果
  • 演示代码
  • 关键逻辑解析
  • 两种风格对比
  • 小结
  • 工程下载

卡片交互里，3D 倾斜是一种很讨喜的效果。鼠标移动时卡片跟着倾斜，能营造出卡片悬浮在界面上的错觉，比单纯的阴影更有立体感。而且这个效果完全不需要 3D 引擎，只用 QML 的 2D 变换就能实现。

3D 倾斜的核心思路是：把鼠标位置归一化到卡片中心坐标系，根据横向位置控制绕 X 轴旋转，根据纵向位置控制绕 Y 轴旋转，再加上 Behavior 让变化平滑。

演示效果

以下演示代码来自 qml_container/Demo_3DTilt.qml，为便于阅读，只展示了关键代码。

演示代码

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

FadeInAnimation {
ColumnLayout {
anchors.fill: parent
anchors.margins: 20
spacing: 15

TitleSeparator {
title: \”3D 倾斜卡片\”
description: \”鼠标移动时卡片产生透视倾斜，模拟真实的 3D 悬浮效果\”