在我们平时看到的网页中,有很多效果都是有3D特效的,今天就做一个简单的立方体.
效果图是这样的:
主要分为外部盒子和内部盒子两个盒子,每一个盒子都是由六个div组成,,通过绝对定位使六个div在一起,再通过旋转角度以及向坐标轴拉伸形成一个盒子,内部盒子只是拉伸的长度小.
当鼠标悬停的时候,将外部盒子的拉伸长度加长,形成了一种鼠标悬停爆开的效果.
HTML部分:
1 <div class="wrap"> 2 <div class="cube"> 3 <div class="front"></div> 4 <div class="back"></div> 5 <div class="right"></div> 6 <div class="left"></div> 7 <div class="top"></div> 8 <div class="bottom"></div> 9 10 <i class="i-front"></i> 11 <i class="i-back"></i> 12 <i class="i-right"></i> 13 <i class="i-left"></i> 14 <i class="i-top"></i> 15 <i class="i-bottom"></i> 16 </div> 17 </div>
css部分:
1 body{ 2 margin: 0; 3 background-color: #eee; 4 } 5 6 .wrap{ 7 height: 200px; 8 margin-top: 150px; 9 perspective: 1000px; 10 } 11 12 .wrap .cube{ 13 position: relative; 14 200px; 15 height: 200px; 16 margin: 0 auto; 17 transform-style: preserve-3d; 18 transform: rotateX(0deg) rotateY(0deg); 19 20 animation: rot 20s linear infinite; 21 } 22 /*外部大盒子*/ 23 .wrap .cube div{ 24 position: absolute; 25 top: 0; 26 left: 0; 27 100%; 28 height: 100%; 29 transition: transform 0.6s ease-in; 30 } 31 32 .wrap .cube .front{ 33 background-image: url(../img/1.jpg); 34 background-size: contain; 35 transform: translateZ(100px); 36 } 37 .wrap .cube .back{ 38 background-image: url(../img/2.jpg); 39 background-size: contain; 40 transform: rotateY(180deg) translateZ(100px); 41 } 42 .wrap .cube .right{ 43 background-image: url(../img/3.jpg); 44 background-size: contain; 45 transform: rotateY(90deg) translateZ(100px); 46 } 47 .wrap .cube .left{ 48 background-image: url(../img/4.jpg); 49 background-size: contain; 50 transform: rotateY(-90deg) translateZ(100px); 51 } 52 .wrap .cube .top{ 53 background-image: url(../img/5.jpeg); 54 background-size: contain; 55 transform: rotateX(90deg) translateZ(100px); 56 } 57 .wrap .cube .bottom{ 58 background-image: url(../img/6.jpeg); 59 background-size: contain; 60 transform: rotateX(-90deg) translateZ(100px); 61 } 62 63 64 65 66 /*内部盒子*/ 67 .wrap .cube i{ 68 position: absolute; 69 top: 50%; 70 left: 50%; 71 margin-top: -50px; 72 margin-left: -50px; 73 100px; 74 height: 100px; 75 } 76 77 .wrap .cube .i-front{ 78 background-image: url(../img/center.jpeg); 79 background-size: contain; 80 transform: translateZ(50px); 81 } 82 .wrap .cube .i-back{ 83 background-image: url(../img/center.jpeg); 84 background-size: contain; 85 transform: rotateY(180deg) translateZ(-50px); 86 } 87 .wrap .cube .i-right{ 88 background-image: url(../img/center.jpeg); 89 background-size: contain; 90 transform: rotateY(90deg) translateZ(50px); 91 } 92 .wrap .cube .i-left{ 93 background-image: url(../img/center.jpeg); 94 background-size: contain; 95 transform: rotateY(-90deg) translateZ(50px); 96 } 97 .wrap .cube .i-top{ 98 background-image: url(../img/center.jpeg); 99 background-size: contain; 100 transform: rotateX(90deg) translateZ(50px); 101 } 102 .wrap .cube .i-bottom{ 103 background-image: url(../img/center.jpeg); 104 background-size: contain; 105 transform: rotateX(-90deg) translateZ(50px); 106 } 107 108 /*伪类*/ 109 .wrap .cube:hover .front{ 110 transform: translateZ(200px); 111 } 112 .wrap .cube:hover .back{ 113 transform: rotateY(180deg) translateZ(200px); 114 } 115 .wrap .cube:hover .right{ 116 transform: rotateY(90deg) translateZ(200px); 117 } 118 .wrap .cube:hover .left{ 119 transform: rotateY(-90deg) translateZ(200px); 120 } 121 .wrap .cube:hover .top{ 122 transform: rotateX(90deg) translateZ(200px); 123 } 124 .wrap .cube:hover .bottom{ 125 transform: rotateX(-90deg) translateZ(200px); 126 } 127 128 @keyframes rot{ 129 from{transform: rotateX(0deg) rotateY(0deg);} 130 to{transform: rotateX(360deg) rotateY(360deg);} 131 }