QML How to rotate image like the background shelf image of MacOSX dock

Question

The background image of the MacOS Dock (and many such clones) is a "shelf" in 3d perspective.

That is if you took a regular rectangle and had it "fall backwards" in 3d space.

For example: http://www.loneblacksheep.pro/image/Download/Dock.gif

Is it possible to do this with a QML Image rotation?

Thanks in advance.

Answer 1

Take a look at QML Rotation Item.

You can set the rotation origin to your Rectangle lower border center, and then rotate on the x-axis.

---

Edit:

Rectangle {
  id: myDock
  width: 500
  height: 50
  color: "red"

  transform: Rotation {

    // Transform origin is the middle point of the lower border
    origin {
      x: myDock.width / 2
      y: myDock.height
    }

    axis {x: 1; y: 0; z: 0}
    angle: 45
  }

}