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

Rated 4.50 out of 5 based on 20 customer ratings

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ế

Mô tả
Đánh giá (0)

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>

0 Nhận xét

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

Posted on 17 thg 8, 2019 By Quảng cáo Hưng Yên

17
thg 8


<!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>