html+css一個展示圖片的盒子
阿新 • • 發佈：2019-01-12
C3旋轉盒子：用css3新特性寫一個展示圖片的盒子。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .out-wrap{position: absolute;width: 200px;height: 200px;top: 50%;left: 50%;transform: translate(-50% -50%); transform-style: preserve-3d;transform: rotateX(-30deg) rotateY(-80deg);animation: rota 15s linear infinite;} @-webkit-keyframes rota{from{transform:rotateX(0deg) rotateY(0deg);}to{transform: rotateX(360deg) rotateY(360deg);}} .out-wrap>div{position: absolute; width: 100%;height: 100%;opacity: 0.6;}/*相對父元素定位不可捨棄,這是圖片拼接的關鍵連結點*/ .out-wrap>span{display: block;position:absolute;top:25%;left:25%;width: 50%;height: 50%;} .out-wrap>div>a,.out-wrap>span>a,.out-pic,.in-pic{display: block;width: 100%;height: 100%;} .out-front{transform: rotateY(0deg) translateZ(100px);} .out-back{transform: rotateY(180deg) translateZ(100px) ;} .out-left{transform: rotateY(-90deg) translateZ(100px);} .out-right{transform: rotateY(90deg) translateZ(100px);} .out-top{transform: rotateX(90deg) translateZ(100px);} .out-bottom{transform: rotateX(-90deg) translateZ(100px);} .in-front{transform: rotateY(0deg) translateZ(50px);} .in-back{transform: translateZ(-50px) rotateY(180deg);} .in-left{transform: rotateY(-90deg) translateZ(50px);} .in-right{transform: rotateY(90deg) translateZ(50px);} .in-top{transform: rotateX(90deg) translateZ(50px);} .in-bottom{transform: rotateX(-90deg) translateZ(50px);} .out-wrap:hover .out-front{transform: rotateY(0deg) translateZ(200px);} .out-wrap:hover .out-back{transform: translateZ(-200px) rotateY(180deg);} .out-wrap:hover .out-left{transform: rotateY(-90deg) translateZ(200px);} .out-wrap:hover .out-right{transform: rotateY(90deg) translateZ(200px);} .out-wrap:hover .out-top{transform: rotateX(90deg) translateZ(200px);} .out-wrap:hover .out-bottom{transform: rotateX(-90deg) translateZ(200px);} </style> </head> <body> <div class="out-wrap"> <div class="out-front"><a><img src="" class="out-pic"/></a></div> <div class="out-back"><a><img src="" class="out-pic"/></a></div> <div class="out-left"><a><img src="" class="out-pic"/></a></div> <div class="out-right"><a><img src="" class="out-pic"/></a></div> <div class="out-top"><a><img src="" class="out-pic"/></a></div> <div class="out-bottom"><a><img src="" class="out-pic"/></a></div> <span class="in-front"><a><img src="" class="in-pic"/></a></span> <span class="in-back"><a><img src="" class="in-pic"/></a></a></span> <span class="in-left"><a><img src="" class="in-pic"/></a></a></span> <span class="in-right"><a><img src="" class="in-pic"/></a></a></span> <span class="in-top"><a><img src="" class="in-pic"/></a></a></span> <span class="in-bottom"><a><img src="" class="in-pic"/></a></a></span> </div> </body> </html>
圖片自行新增。