您的位置：首页 > Web前端 > CSS

html+css一个展示图片的盒子

2019-01-02 11:08 841 查看

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>

图片自行添加。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航