Chia sẻ Template Blogspot hiệu ứng 3D đẹp mắt

0

Quảng cáo Google Hưng Yên | Chuyên thiết kế Website, Hosting, Mail, server, chạy quảng cáo Google, Facebook, Zalo

XEM DEMO Xem trước mẫu website/blog thực tế
Chat Zalo

Chia sẻ Template Blogspot hiệu ứng 3D đẹp mắt

Chia sẻ Template Blogspot hiệu ứng 3D đẹp mắt
Chia sẻ Template Blogspot hiệu ứng 3D đẹp mắt. Tải về template blogspot ở nút download phía trên. Còn không hãy sử dụng code để up lên hosting ở dưới đây:

HƯỚNG DẪN SỬ DỤNG

Mấy bác tải cái này về : http://bit.ly/2MmJiLP
Ở thư mục chứa ảnh các bác thay ảnh mình thích vào rồi đổi tên y hệt vậy nhé

Lưu ý:
Với file ảnh x.png thì resize 100x100
Với file ảnh 0x.png thì resize 400x400
Còn preview thì tấm nào cũng được
Với x là số thứ tự ảnh

+ Code:


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title></title>



<style>

*{

margin:0;

padding:0;

}

body{

background: url(img/preview.jpg) 0 0 no-repeat; background-size: 100%;

-webkit-perspective: 800;

}

li{

list-style: none;

}

.box{

width:200px;

height:200px;

position: relative;

margin:300px auto;

-webkit-transform-style:preserve-3d;

-webkit-transform:rotateX(13deg);

-webkit-animation:move 5s linear infinite;

}

.minbox{

width:100px;

height:100px;

position: absolute;

left:50px;

top:50px;

-webkit-transform-style:preserve-3d;

}

.minbox li{

width:100px;

height:100px;

position: absolute;

left:0;

top:0;

}

.minbox li:nth-child(1){

background: url(img/1.png) no-repeat 0 0;

-webkit-transform:translateZ(50px);

}

.minbox li:nth-child(2){

background: url(img/2.png) no-repeat 0 0;

-webkit-transform:rotateX(180deg) translateZ(50px);

}

.minbox li:nth-child(3){

background: url(img/3.png) no-repeat 0 0;

-webkit-transform:rotateX(-90deg) translateZ(50px);

}

.minbox li:nth-child(4){

background: url(img/4.png) no-repeat 0 0;

-webkit-transform:rotateX(90deg) translateZ(50px);

}

.minbox li:nth-child(5){

background: url(img/5.png) no-repeat 0 0;

-webkit-transform:rotateY(-90deg) translateZ(50px);

}

.minbox li:nth-child(6){

background: url(img/6.png) no-repeat 0 0;

-webkit-transform:rotateY(90deg) translateZ(50px);

}

.maxbox li:nth-child(1){

background: url(img/01.png) no-repeat 0 0;

-webkit-transform:translateZ(50px);

}

.maxbox li:nth-child(2){

background: url(img/02.png) no-repeat 0 0;

-webkit-transform:rotateX(180deg) translateZ(50px);

}

.maxbox li:nth-child(3){

background: url(img/03.png) no-repeat 0 0;

-webkit-transform:rotateX(-90deg) translateZ(50px);

}

.maxbox li:nth-child(4){

background: url(img/04.png) no-repeat 0 0;

-webkit-transform:rotateX(90deg) translateZ(50px);

}

.maxbox li:nth-child(5){

background: url(img/05.png) no-repeat 0 0;

-webkit-transform:rotateY(-90deg) translateZ(50px);

}

.maxbox li:nth-child(6){

background: url(img/06.png) no-repeat 0 0;

-webkit-transform:rotateY(90deg) translateZ(50px);

}

.maxbox{

width: 200px;

height: 200px;

position: absolute;

left: 0;

top: 0;

-webkit-transform-style: preserve-3d;

}

.maxbox li{

width: 200px;

height: 200px;

background: #fff;

border:1px solid #ccc;

position: absolute;

left: 0;

top: 0;

opacity: 0.2;

-webkit-transition:all 1s ease;

}

.maxbox li:nth-child(1){

-webkit-transform:translateZ(100px);

}

.maxbox li:nth-child(2){

-webkit-transform:rotateX(180deg) translateZ(100px);

}

.maxbox li:nth-child(3){

-webkit-transform:rotateX(-90deg) translateZ(100px);

}

.maxbox li:nth-child(4){

-webkit-transform:rotateX(90deg) translateZ(100px);

}

.maxbox li:nth-child(5){

-webkit-transform:rotateY(-90deg) translateZ(100px);

}

.maxbox li:nth-child(6){

-webkit-transform:rotateY(90deg) translateZ(100px);

}

.box:hover ol li:nth-child(1){

-webkit-transform:translateZ(300px);

width: 400px;

height: 400px;

opacity: 0.8;

left: -100px;

top: -100px;

}

.box:hover ol li:nth-child(2){

-webkit-transform:rotateX(180deg) translateZ(300px);

width: 400px;

height: 400px;

opacity: 0.8;

left: -100px;

top: -100px;

}

.box:hover ol li:nth-child(3){

-webkit-transform:rotateX(-90deg) translateZ(300px);

width: 400px;

height: 400px;

opacity: 0.8;

left: -100px;

top: -100px;

}

.box:hover ol li:nth-child(4){

-webkit-transform:rotateX(90deg) translateZ(300px);

width: 400px;

height: 400px;

opacity: 0.8;

left: -100px;

top: -100px;

}

.box:hover ol li:nth-child(5){

-webkit-transform:rotateY(-90deg) translateZ(300px);

width: 400px;

height: 400px;

opacity: 0.8;

left: -100px;

top: -100px;

}

.box:hover ol li:nth-child(6){

-webkit-transform:rotateY(90deg) translateZ(300px);

width: 400px;

height: 400px;

opacity: 0.8;

left: -100px;

top: -100px;

}

@keyframes move{

0%{

-webkit-transform: rotateX(13deg) rotateY(0deg);

}

100%{

-webkit-transform:rotateX(13deg) rotateY(360deg);

}

}

</style>



</head>

<body>



<div class="box">

<ul class="minbox">

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

<ol class="maxbox">

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ol>

</div>

</body>

</html>

Đăng bởi : Mang Hung Yen Chia sẻ Template Blogspot hiệu ứng 3D đẹp mắt Đánh giá: 9.1 / 10

0 Nhận xét
Xem nhiều
Blog
    Liên hệ quảng cáo