Các thuộc tính 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 hoặc thành phần html để tiết lộ nội dung ở phía sau của hình ảnh ban đầu. Khi người sử dụng di chuột lên các hình ảnh hoặc thành phần html ban đầu họ sẽ thấy hình ảnh lật và xoay với hiệu ứng 3D.
Hiệu ứng phát triển bới mybloggertrick và hoạt động dựa trên nền tảng CSS3 do vậy hoạt động tốt trên các trình duyệt hỗ trợ CSS3 như trên google chrome, firefox10 +, IE10 + và safari. Với các trình duyệt cũ như IE5,6,7 thì hiệu ứng 3D sẽ không xuất hiện mà trình duyệt chỉ hiển thị mông nội dung.
Bài viết này mình sẽ giới thiệu 2 hiệu ứng cho hình ảnh là xoay là lật. Bạn có thể xem demo của cả 2 style theo link bên dưới:
» Style1: Xoay dọc ảnh với CSS3 (Upward Rotate 3D Flip).
Ảnh minh họa:
1.1- Đăng nhập vào Blog
1.2- Vào mẫu (Template)
1.3- Chọn Chỉnh sửa HTML (Edit HTML).
1.4. Thêm đoạn code bên dưới vào trước thẻ ]]></b:skin> :
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); }
1.5. Lưu mẫu lại
1.6. Để sử dụng bạn thêm đoạn mã sau đây vào 1 widget HTML/javascript hoặc vào phần HTML của bài viết:
<div class="flip" style="display: inline-block; margin-right: 40px"> <div class="rotate x"> <img src="YOUR IMAGE URL 1"> <div> YOUR DESCRIPTION. <br /><br /> <img src="YOUR IMAGE URL 2" style="margin:0 auto" /> </div> </div> </div>
Tùy chỉnh:
- Thay YOUR IMAGE URL 1 thành URL của hình ảnh khi chưa dê chuột vào.
- Thay YOUR IMAGE URL 2 thành URL của hình ảnh sau khi dê chuột vào.
- Thay YOUR DESCRIPTION thành phần mô tả cho hình ảnh khi dê chuột vào.
» Style 2: Xoay, lật hình ảnh qua bên phải (Right side Rotate 3D Flip)!.
Ảnh minh họa:
2.1- Đăng nhập vào Blog
2.2- Vào mẫu (Template)
2.3- Chọn Chỉnh sửa HTML (Edit HTML).
2.4. Thêm đoạn code bên dưới vào trước thẻ ]]></b:skin> :
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.y *:nth-child(2){ /* Y Axis rotate specific CSS. Rotate 2nd child DIV 180deg in the Y axis so it mirrors the first */ -moz-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } div.flip:hover > div.rotate.y{ /* Y Axis rotate specific CSS. Rotate div.rotate.y when mouse rolls over container */ -moz-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); }
2.5. Lưu mẫu lại
2.6. Để sử dụng bạn thêm đoạn mã sau đây vào 1 widget HTML/javascript hoặc vào phần HTML của bài viết:
<div class="flip" style="width: 250px; height: 200px; display: inline-block;"> <div class="rotate y"> <img src="YOUR IMAGE URL 1"> <img src="YOUR IMAGE URL 2"> </div> </div>
Tùy chỉnh:
- Thay YOUR IMAGE URL 1 thành URL của hình ảnh khi chưa dê chuột vào.
- Thay YOUR IMAGE URL 2 thành URL của hình ảnh sau khi dê chuột vào.
Nhận xét
a nam ơi . anh qua trang thienhieu.com a xem giúp e với , tự nhiên mấy hôm nay blog của e nó load chậm quá . a kiểm tra giúp e với nhé
Trả lờiXóaDo nhà mạng em đang sử dụng thôi. Thi thoảng sẽ bị chậm đôi chút.
XóaAnh test thấy em sử dụng các bài viết từ các trang báo mạng do vậy ảnh hưởng khá lớn, Em nên Upload các ảnh đó trực tiếp lên blog của em.
vậy e phải save ảnh rồi , e tải lên hả a , coppy ảnh tải lên cũng ảnh hưởng à anh
Trả lờiXóaYk một số host có chức năng bóp băng thông với các trang khác nên sẽ ảnh hưởng đó.
XóaCái này không hỗ trợ google chrome
Trả lờiXóa