纯CSS+HTML实现3D⽴⽅体轮播图
1.实现点击左右按钮，点击图⽚下⽅圆点都可以使⽴⽅体旋转到对应⾯，实现了不同图⽚的展⽰
2.主要技术：HTML元素的先后顺序，css的旋转，radio标签和lable标签的使⽤，transform-style: prerve-3d;，transition: all 3s;，transform: rotateY(0) translateZ(200px);，
效果如图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta chart="utf-8"/>
<title>css轮播图</title>
<style type="text/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: prerve-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设置背景图⽚，且旋转位置组成⽴⽅体*/
.
ps工具栏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;
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~.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);}
</style>
</head>
<body>
<!--核⼼思想：利⽤⼀组单选框每次只可以选中⼀个的特性和lable标签关联，
实现选中⼀个单选框时可以关联到多个lable标签，
当单选按钮处于选中状态时，利⽤css3的选择器改变对应的图⽚显⽰，
这样就可以实现点击变换图⽚或者轮播图的效果，-->
<div class="box">
<!--将单选框放到最前⾯好选择后⾯的元素-->
<input type="radio"name="chk"id="chk1"class="check"checked="checked"/> <input type="radio"name="chk"id="chk2"class="check"/>
<input type="radio"name="chk"id="chk3"class="check"/>
<input type="radio"name="chk"id="chk4"class="check"/>
<input type="radio"name="chk"id="chk5"class="check"/>
<input type="radio"name="chk"id="chk6"class="check"/>
<ul class="inner">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="titles">
<label for="chk1"></label>
<label for="chk2"></label>
<label for="chk3"></label>
<label for="chk4"></label>
<label for="chk5"></label>
<label for="chk6"></label>冯谖客孟尝君原文及翻译
</div>
<!--将第六个排到第⼀位---显⽰第⼀个时左边按钮是第六个的连接-->
<div class="btn left_btn">
<label for="chk6"></label>
<label for="chk1"></label>
<label for="chk2"></label>
<label for="chk3"></label>
<label for="chk4"></label>
<label for="chk5"></label>
</div>
<!--同理-->
<div class="btn right_btn">
<label for="chk2"></label>
<label for="chk3"></label>
<label for="chk4"></label>
普罗塔哥拉<label for="chk5"></label>
<label for="chk6"></label>
<label for="chk1"></label>
</div>
</div>
</body>
</html>
