CSS
语言：
CSSSCSS
确定
body {
perspective: 1000px;
background: rgba(0, 0, 0, 0.1);
}
.imgWrap {
position: relative;
width: 70%;
margin: 5% auto;
padding-bottom: 31%;
transform: rotateY(25deg);
transform-style: preserve-3d;
}
.imgWrap > div {
position: absolute;
top: 0;
width: 30.3%;
height: 100%;
float: left;
background-image: url('/uploads/161001/normal4.jpg');
background-size: auto 100%;
transform-style: preserve-3d;
outline: 1px solid transparent;
/* prevent jagged edges in firefox */
}
.imgWrap .left {
left: 0;
background-position: 3% 0;
}
.imgWrap .center {
left: 34.83%;
background-position: -97% 0;
}
.imgWrap .right {
left: 69.66%;
background-position: -197% 0;
}
.imgWrap > div:before {
content: '';
position: absolute;
top: 0;
right: 100%;
width: 10%;
height: 100%;
background: inherit;
transform-origin: 100% 50%;
transform: rotateY(-90deg);
}
.imgWrap .left:before {
background-position: 0% 0;
}
.imgWrap .center:before {
background-position: -1001.3% 0;
}
.imgWrap .right:before {
background-position: -2001.4% 0;
}
.imgWrap > div:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 150%;
transform-origin: 50% 100%;
transform: rotateX(-90deg);
background: rgba(0, 0, 0, 0.1);
}
