Q:

Rotatate an image like a book with a css3

I have an image where the left side is black and the right side is red.
My question: it's possible flip this image like a book in the middle?i would like the left side rotate and the right side stay in old position.
Thanks

A:

You can achieve a fairly decent effect using the perspective property and a rotate around the Y axis.
For example with markup like this:
<div class="wrapper">
  <div class="left"></div>
  <div class="right"></div>
</div>

You would use CSS like this:
.left, .right {
  width:100px;
  height:200px;
  float:left;
}
.left {
  background:red;
  transform-origin:100px 0;
  transition:transform 1s;
}
.right {
  background:black;
}
.wrapper {
  perspective:1000px;
  perspective-origin:100px 100px;
}

.wrapper:hover .left {
  transform:rotateY(180deg);
}

This particular example applies the transform as you hover over the "book".
Here is a fiddle example including webkit prefixes: http://jsfiddle.net/nAEBF/

