Book Image

Responsive Web Design with HTML5 and CSS3, Second Edition

By : Ben Frain
5 (1)
Book Image

Responsive Web Design with HTML5 and CSS3, Second Edition

5 (1)
By: Ben Frain

Overview of this book

Table of Contents (17 chapters)
Responsive Web Design with HTML5 and CSS3 Second Edition
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

CSS3 3D transformations


Let's look at our first example. An element that flips when we hover over it. I've used hover here to invoke the change as it's simple for the sake of illustration, however the flipping action could just as easily be initiated with a class change (via JavaScript) or when an element received focus.

We will have two of these elements; a horizontal flipping element and a vertical flipping element. You can view the final example at example_08-04. Images fail to fully convey this technique but the idea is that the element flips from the green 'face' to the red 'face' and gives the illusion of doing so through 3D space with the aid of perspective. Here's a grab partway through the transition from green to red which hopefully conveys some of the effect.

Note

It's also worth knowing that while positioning an element absolutely with top/left/bottom/right values operates pixel by pixel, a transform can interpolate at sub-pixel positions.

Here's the markup for the flipping element...