Xoay hình 1 bức ảnh khi re chuột vào bằng CSS

CSS3 có khả năng xoay các thành phần html theo phong cách 3D. CSS3 3D này sẽ giúp bạn biết cách làm thế nào để xoay hoặc lật hai mặt của hình ảnh, chúng ta có thể bố trí mặt trước là hình mặt sau là hình và--

--chữ layout cho phù hợp.

Các làm

Đoạn code CSS:

<style type="text/css">     div.flip{ position:relative; width: 300px; /* Set default width of flip */ height: 250px; /* Set default height */ -webkit-perspective: 600px; /* larger the value, the less pronounced the 3D effect */ -moz-perspective: 600px; -o-perspective: 600px; perspective: 600px; } div.flip div.rotate{ width: 100%; height: 100%; -moz-transform-style: preserve-3d; /* Specify all child elements inside this DIV maintain the same perspective */ -webkit-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -moz-transition: all 0.6s ease-in-out 0.3s; /* final 0.3s specifies delay before effect kicks in */ -webkit-transition: all 0.6s ease-in-out 0.3s; -o-transition: all 0.6s ease-in-out 0.3s; transition: all 0.6s ease-in-out 0.3s; } div.flip div.rotate > *{ /* Target all children elements */ position:absolute; width: 100%; height: 100%; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } div.flip div.rotate > div{ /* Target all child DIVs */ -webkit-box-sizing: border-box; /* Specify that any border/ paddings do not add to the DIV's total width */ -moz-box-sizing: border-box; box-sizing: border-box; padding: 8px; background: #eee; } div.rotate.x *:nth-child(2){ /* X Axis rotate specific CSS. Rotate 2nd child DIV 180deg in the X axis */ -moz-transform: rotateX(180deg); -webkit-transform: rotateX(180deg); -o-transform: rotateX(180deg); transform: rotateX(180deg); } div.flip:hover > div.rotate.x{ /* X Axis rotate specific CSS. Rotate div.rotate.x when mouse rolls over container */ -moz-transform: rotateX(180deg); -webkit-transform: rotateX(180deg); -o-transform: rotateX(180deg); transform: rotateX(180deg); }     .auto-style1 {         width: 100%;     } </style>

Đoạn code ví dụ:

<div class="flip" style="display: inline-block;"> <div class="rotate x"> <asp:Image ID="Image1" runat="server" Height="250px" ImageUrl="~/images/hoa.png"/> <div> <div> <div style="float:left"> <asp:Label ID="Label9" runat="server" Text="TỔNG SỐ" ForeColor="blue"></asp:Label> </div> <asp:Label ID="Label6" runat="server" Text=””/>                                                </div> <asp:Image ID="Image3" runat="server" Height="100px" ImageUrl="~/images/hoa.png"/> <br> </br> <asp:Label ID="Label8" runat="server" Text=”Thông tin” ></asp:Label> </div> </div> /div> </div>                       </div>