CSS Xoay ngược ảnh, đổi ảnh

Cách dảo ngược đối tượng đơn giản:

<style>
.rotate {margin: auto;width:400px;height:300px;
transition: all 0.5s ease-in-out 0s;
perspective: 500;
background:#E8E8FF;
}
.rotate.x:hover {background-color:#E8E800;transform: rotateX(180deg);-webkit-transform: rotateX(180deg);-moz-transform: rotateX(180deg);-ms-transform: rotateX(180deg);-o-transform: rotateX(180deg);}
.rotate.y:hover {background-color:#E8E800;transform: rotateY(180deg);-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);-ms-transform: rotateY(180deg);-o-transform: rotateY(180deg);}

</style>
<div class="rotate x"><H1>BENDOI.VN</H1></div>
<div class="rotate y"><H1>BENDOI.VN</H1></div>

BENDOI.VN

BENDOI.VN

---

Cách trên khi kích thước vùng rotate biến đổi, có thể con trỏ chuột không còn nằm trong rotate nữa, khi đó có thể thuộc tính hover không được thực hiện hết.
Một cách trọn vẹn hơn, thêm vùng area cố định bao ngoài rotate, khi chuột đi vào area thì rotate sẽ quay:

<style>
.area {margin: auto;position:relative;width: 400px;     height: 300px;    perspective: 600px; background:#D9D9D9;}
.area .rotate{width: 100%;    height: 100%;
transform-style: preserve-3d;transition: all 0.5s ease-in-out 0s;
-webkit-transition:preserve-3d;transition: all 0.5s ease-in-out 0s;
-o-transition:preserve-3d;transition: all 0.5s ease-in-out 0s;
-moz-transition:preserve-3d;transition: all 0.5s ease-in-out 0s;
}
.area:hover .rotate.x {background-color:#E8E800;transform: rotateX(180deg);-webkit-transform: rotateX(180deg);-moz-transform: rotateX(180deg);-ms-transform: rotateX(180deg);-o-transform: rotateX(180deg);}
.area:hover .rotate.y {background-color:#E8E800;transform: rotateY(180deg);-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);-ms-transform: rotateY(180deg);-o-transform: rotateY(180deg);}
</style>
<div class="area"> <div class="rotate x">   <H1>BENDOI.VN</H1>  </div></div>
<br/>
<div class="area"> <div class="rotate y"> <H1>BENDOI.VN</H1>  </div></div>

BENDOI.VN

BENDOI.VN

---

Một cách xoay ảnh này sang ảnh khác:

<style type="text/css">
.area {margin: auto;position:relative;width: 400px;     height: 300px;    perspective: 600px; background:#D9D9D9;}
.area .rotate{width: 100%;    height: 100%;
transform-style: preserve-3d; transition: all 0.5s ease-in-out 0s;
-webkit-transition:preserve-3d; transition: all 0.5s ease-in-out 0s;
-o-transition:preserve-3d; transition: all 0.5s ease-in-out 0s;
-moz-transition:preserve-3d; transition: all 0.5s ease-in-out 0s;
}
.area .rotate .truoc,.area .rotate .sau{position:absolute;backface-visibility: hidden;}
.rotate.x .sau{ transform: rotateX(180deg);   -webkit-transform: rotateX(180deg); -o-transform: rotateX(180deg); -moz-transform: rotateX(180deg); }
.area:hover  .rotate.x{ transform: rotateX(180deg);   -webkit-transform: rotateX(180deg); -o-transform: rotateX(180deg); -moz-transform: rotateX(180deg); }
.rotate.y .sau{ transform: rotateY(180deg); -webkit-transform: rotateY(180deg);  -o-transform: rotateY(180deg); -moz-transform: rotateY(180deg);}
.area:hover  .rotate.y{transform: rotateY(180deg);   -webkit-transform: rotateY(180deg);  -o-transform: rotateY(180deg); -moz-transform: rotateY(180deg);}
</style>
<div class="area">
  <div class="rotate x">
    <div class="truoc"><img src="http://....jpg" title="2" /></div>
<div class="sau"><img src="http://....jpg" title="2" /></div>
  </div>
</div>
<div class="area">
<div class="rotate y">
    <div class="truoc"><img src="http://....jpg" title="2" /></div>
<div class="sau"><img src="http://....jpg" title="2" /></div>
</div>
</div>

---

Một cách viết tương tự:

<style type="text/css">
.area {margin: auto;position:relative;width: 400px;     height: 300px;    perspective: 600px; background:#D9D9D9;}
.area .rotate{width: 100%;    height: 100%;
transform-style: preserve-3d;transition: all 0.5s ease-in-out 0s;
-webkit-transition:preserve-3d;transition: all 0.5s ease-in-out 0s;
-o-transition:preserve-3d;transition: all 0.5s ease-in-out 0s;
-moz-transition:preserve-3d;transition: all 0.5s ease-in-out 0s;
}
.area .rotate >*{position:absolute;backface-visibility: hidden;}
.rotate.x *:nth-child(2){ transform: rotateX(180deg);  -webkit-transform: rotateX(180deg); -o-transform: rotateX(180deg); -moz-transform: rotateX(180deg); }
.area:hover > .rotate.x{ transform: rotateX(180deg);   -webkit-transform: rotateX(180deg); -o-transform: rotateX(180deg); -moz-transform: rotateX(180deg); }
.rotate.y *:nth-child(2){ transform: rotateY(180deg); -webkit-transform: rotateY(180deg);  -o-transform: rotateY(180deg); -moz-transform: rotateY(180deg);}
.area:hover > .rotate.y{transform: rotateY(180deg);   -webkit-transform: rotateY(180deg);  -o-transform: rotateY(180deg); -moz-transform: rotateY(180deg);}
</style>

<div class="area">
<div class="rotate x">
<img src="http://....jpg" title="1"/>
<img src="http://....jpg" title="2" />
</div>
</div>
<div class="area">
<div class="rotate y">
<img src="http://....jpg" title="1"/>
<img src="http://....jpg" title="2" />
</div>
</div>

---

- Có một bất cập là hiệu ứng thứ nhất đơn giản thì hiển thị trên hầu hết các trình duyệt chính.
- Hiệu ứng thứ 2,3,4 cũng hiển thị được trên các trình duyệt chính nhưng tại thời điểm hiện nay chỉ Firefox mới hiển thị đúng nhất.