html图片分四面切割播,CSS3切割轮播图
* {
margin:0;
padding:0;
}
.view {
width:560px;
height:300px;
margin:200px auto;
position:relative;
}
.box {
width:100%;
height:100%;
list-style:none;
background-color:black;
position:absolute;
/* 開啟3d效果 */
transform-style:preserve-3d;
}
.box li {
width:25%;
height:100%;
position:relative;
float:left;
/* li元素的子元素span需要3d顯示 */
transform-style:preserve-3d;
transition:all .5s;
}
.box li span {
width:100%;
height:100%;
position:absolute;
}
/* 每一個li標簽的第一個span都有同一個圖片的背景 */
.box li span:nth-of-type(1) {
background:url('http://www.jq22.com/img/cs/500x300-1.png');
transform:translateZ(-150px) rotateX(180deg);
}
/* 每一個li標簽的第2個span都有同一個圖片的背景 */
.box li span:nth-of-type(2) {
background:url('http://www.jq22.com/img/cs/500x300-2.png');
transform:translateY(-150px) rotateX(90deg);
}
/* 每一個li標簽的第3個span都有同一個圖片的背景 */
.box li span:nth-of-type(3) {
background:url('http://www.jq22.com/img/cs/500x300-3.png');
transform:translateY(150px) rotateX(-90deg);
}
/* 每一個li標簽的第4個span都有同一個圖片的背景 */
.box li span:nth-of-type(4) {
background:url('http://www.jq22.com/img/cs/500x300-4.png');
transform:translateZ(150px);
}
/* 通過背景圖像位移,達到4個span構成一個完整圖片背景 */
.box li:nth-of-type(2) span {
background-position-x:-100%;
}
.box li:nth-of-type(3) span {
background-position-x:-200%;
}
.box li:nth-of-type(4) span {
background-position-x:-300%;
}
.view a {
width:60px;
height:60px;
line-height:60px;
text-align:center;
text-decoration:none;
position:absolute;
background-color:black;
font-size:60px;
opacity:.5;
color:#fff;
top:50%;
margin-top:-30px;
display:none;
}
.view .pre {
left:0;
}
.view .next {
right:0;
}
總結
以上是生活随笔為你收集整理的html图片分四面切割播,CSS3切割轮播图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 什么是顺序执行以及其特点
- 下一篇： 闪光css,CSS实现的一闪而过的图片闪