
目录最终效果拆开讲讲双轴旋转鼠标位置映射弹性回正高光层几个可以调的参数什么时候用小结完整代码工程下载立体与阴影系列最后一篇,做一个 3D 倾斜跟随按钮,鼠标在按钮上移动时,按钮会绕 X 轴和 Y 轴同时倾斜,跟随鼠标位置产生 3D 立体感,离开后弹性回正。按压时整体缩小。适合用在产品展示卡片等需要立体感的场景。最终效果鼠标在上面移动时按钮 3D 倾斜跟随(鼠标在哪边就往哪边倾),离开后弹性回正,按压时整体缩小。顶部有高光层增强立体感。拆开讲讲核心是双轴旋转 + 鼠标位置映射 + 弹性回正。按钮同时绕 X 轴和 Y 轴旋转,鼠标在按钮上的位置决定两个轴的旋转角度。双轴旋转property real rotX: 0 property real rotY: 0 transform: [ Rotation { id: tiltRotX1 axis { x: 1; y: 0; z: 0 } angle: tiltBtn1.rotX origin.x: tiltBtn1.width / 2 origin.y: tiltBtn1.height / 2 }, Rotation { id: tiltRotY1 axi