|
1.实现点击左右按钮，点击图片下方圆点都可以使立方体旋转到对应面，实现了不同图片的展示 2.主要技术：HTML元素的先后顺序，css的旋转，radio标签和lable标签的使用，transform-style: preserve-3d;，transition: all 3s;，transform: rotateY(0) translateZ(200px);， 效果如图： 代码如下：
css轮播图
*{
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
.box{
width: 600px;
height: 500px;
position: relative;
margin: 100px auto;
}
/*设置3d场景,所有的变化时间为2秒*/
.inner{
width: 400px;
height: 400px;
position: absolute;
left: 100px;
transform-style: preserve-3d;
transition: all 2s;
perspective: 100000px;
}
.inner li{
width: 400px;
height: 400px;
position: absolute;
top: 0;
background-size: cover;
background-position: center;
opacity: 0.7;
transition: all 3s;
}
/*给li设置背景图片,且旋转位置组成立方体*/
.inner li:nth-of-type(1){
background-image: url(img/1.jpg);
transform: rotateY(0) translateZ(200px);
}
.inner li:nth-of-type(2){
background-image: url(img/2.jpg);
transform: rotateY(90deg) translateZ(200px);
}
.inner li:nth-of-type(3){
background-image: url(img/3.jpg);
transform: rotateY(180deg) translateZ(200px);
}
.inner li:nth-of-type(4){
background-image: url(img/4.jpg);
transform: rotateY(270deg) translateZ(200px);
}
.inner li:nth-of-type(5){
background-image: url(img/5.jpg);
transform: rotateX(-90deg) translateZ(200px);
}
.inner li:nth-of-type(6){
background-image: url(img/6.jpg);
transform: rotateX(90deg) translateZ(200px);
}
/*按钮样式*/
.btn{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
margin-top: -50px;
}
.left_btn{
left: 0;
}
.right_btn{
right: 0;
}
.btn>label{
display: none;
position: absolute;
width: 50px;
height: 50px;
background-color: #ccc;
top: 25px;
left: 25px;
border-radius: 25px;
}
.btn>label::before{
content: "";
display: block;
position: absolute;
width: 25px;
height: 25px;
border-right: 2px solid black;
border-bottom: 2px solid black;
transform: rotate(135deg);
margin: 13px auto auto 20px;
}
.right_btn>label::before{
transform: rotate(-45deg);
margin: 13px auto auto 3px;
}
/*小圆点样式.*/
.titles{
position: absolute;
width: 100%;
height: 90px;
bottom: 0;
text-align: center;
line-height: 50px;
}
.titles>label{
width: 15px;
height: 15px;
display: inline-block;
background-color: #cccc;
border: 1px solid #eee;
border-radius: 50%;
}
/*将单选按钮隐藏*/
.check{
display: none;
}
/*第1个单选框选中时，第1个按钮显示，第1个圆点变色，显示第1张图片*/
.check:nth-child(1):checked~.btn>label:nth-child(1){display: block;}
.check:nth-child(1):checked~.titles>label:nth-child(1){background-color: aqua;}
.check:nth-child(1):checked~.inner li:nth-of-type(1){opacity: 1;}
.check:nth-child(1):checked~.inner{transform: rotateY(360deg) rotateX(360deg);}
/*第2个单选框选中时，第2个按钮显示，第2个圆点变色，显示第2张图片*/
.check:nth-child(2):checked~.btn>label:nth-child(2){display: block;}
.check:nth-child(2):checked~.titles>label:nth-child(2){background-color: aqua;}
.check:nth-child(2):checked~.inner li:nth-of-type(2){opacity: 1;}
.check:nth-child(2):checked~.inner{transform: rotateY(270deg) rotateX(0);}
/*第3个单选框选中时，第3个按钮显示，第3个圆点变色，显示第3张图片*/
.check:nth-child(3):checked~.btn>label:nth-child(3){display: block;}
.check:nth-child(3):checked~.titles>label:nth-child(3){background-color: aqua;}
.check:nth-child(3):checked~.inner li:nth-of-type(3){opacity: 1;}
.check:nth-child(3):checked~.inner{transform: rotateY(540deg) rotateX(360deg);}
/*第4个单选框选中时，第4个按钮显示，第4个圆点变色，显示第4张图片*/
.check:nth-child(4):checked~.btn>label:nth-child(4){display: block;}
.check:nth-child(4):checked~.titles>label:nth-child(4){background-color: aqua;}
.check:nth-child(4):checked~.inner li:nth-of-type(4){opacity: 1;}
.check:nth-child(4):checked~.inner{transform: rotateY(90deg) rotateX(0);}
/*第5个单选框选中时，第5个按钮显示，第5个圆点变色，显示第5张图片*/
.check:nth-child(5):checked~.btn>label:nth-child(5){display: block;}
.check:nth-child(5):checked~.titles>label:nth-child(5){background-color: aqua;}
.check:nth-child(5):checked~.inner li:nth-of-type(5){opacity: 1;}
.check:nth-child(5):checked~.inner{transform: rotateY(360deg) rotateX(90deg);}
/*第6个单选框选中时，第6个按钮显示，第6个圆点变色，显示第6张图片*/
.check:nth-child(6):checked~.btn>label:nth-child(6){display: block;}
.check:nth-child(6):checked~.titles>label:nth-child(6){background-color: aqua;}
.check:nth-child(6):checked~.inner li:nth-of-type(6){opacity: 1;}
.check:nth-child(6):checked~.inner{transform: rotateY(0) rotateX(-90deg);}
|