Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

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

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

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-2017 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268