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

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

Liên hệ

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 hosti...


XEM DEMO
Tình trạng: Còn hàng
Mã hàng: z-100000
Danh mục:
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>

Thêm đánh giá

Đăng nhận xét

Hãy liên hệ ngay với chúng tôi để được tư vấn miễn phí

Email: contact@doannguyen.net
Liên hệ