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>

Nguồn: sưu tầm