Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

CSS 3D Rotation Examples

It is truly amazing what the latest CSS specifications allows you to do do in a browser. CSS level 3 defines 2D and 3D transforms and one of those transforms is 3D rotations. But before you can use any 3D transforms, or even 2D transforms for that matter, you need to understand the Cartesian coordinate system.

The Cartesian coordinate system specifies each point in a plane by a pair of numerical coordinates, x and y. The origin of the coordinate plane is located at x=0,y=0. The x axis runs horizontally with numbers increasing from left-to-right. The y axis runs vertically with numbers increasing from bottom to top.

Cartesian coordinate plane

The diagram above shows four points on the Cartesian coordinate plane marked with their coordinates: (2, 3) in green, (-3, 1) in red, (-1.5, -2.5) in blue, and the origin (0, 0) in purple.

Of course, we live in a 3 dimensional universe, which means we also have a third axis, the z axis, that runs transversely to the 2D coordinate plane, in other words from in-to-out, or in-your-face so to speak.

3D coordinate space

The diagram above shows a point in 3D space with coordinates x = 2, y = 3, and z = 4, or (2, 3, 4).

Rotate Around a Single Axis

transform: rotateX(angle) defines a rotation around the X axis.

<img style="transform: perspective(500px) rotateX(45deg)" border="0" width="200" height="200" src="images/scott_c41.jpg" />

In the example above, the image is rotated 45 degrees around the X axis. Note that the rotation direction is clock-wise if you're facing the X axis looking left towards the origin.

The perspective property enhances an elements 3D appearance. It creates a vanishing point effect. The value of perspective defines how many pixels a 3D element is placed from the view. Lower values for perspective enhances the 3D effect and places the object more in-your-face.

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2023 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268