css代码块
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
div {
width: 1000px;
margin: 0 auto;
text-align: center;
position: relative;
}
section {
transform-style: preserve-3d;
animation: slide 10s linear infinite;
transform: rotateX(-30deg) rotateY(-80deg);
}
.big {
opacity: 0.5;
}
div:hover .big {
transition: 1s;
}
img:nth-of-type(1) {
width: 500px;
position: absolute;
height: 500px;
transform: rotate3d(0, 1, 0, 0deg) translateZ(250px);
}
img:nth-of-type(2) {
width: 500px;
position: absolute;
height: 500px;
transform: rotate3d(0, 1, 0, 180deg) translateZ(250px);
}
img:nth-of-type(3) {
width: 500px;
position: absolute;
height: 500px;
transform: rotate3d(0, 1, 0, 90deg) translateZ(250px);
}
img:nth-of-type(4) {
width: 500px;
position: absolute;
height: 500px;
transform: rotate3d(0, 1, 0, -90deg) translateZ(250px);
}
img:nth-of-type(5) {
width: 500px;
position: absolute;
height: 500px;
transform: rotate3d(1, 0, 0, 90deg) translateZ(250px);
}
img:nth-of-type(6) {
width: 500px;
position: absolute;
height: 500px;
transform: rotate3d(1, 0, 0, -90deg) translateZ(250px);
}
/* 移入后 */
section:hover img:nth-of-type(1) {
width: 500px;
position: absolute;
height: 500px;
transform: rotate3d(0, 1, 0, 0deg) translateZ(500px);
}
section:hover img:nth-of-type(2) {
width: 500px;
position: absolute;
height: 500px;
transform: rotate3d(0, 1, 0, 180deg) translateZ(500px);
}
section:hover img:nth-of-type(3) {
width: 500px;
position: absolute;
height: 500px;
transform: rotate3d(0, 1, 0, 90deg) translateZ(500px);
}
section:hover img:nth-of-type(4) {
width: 500px;
position: absolute;
height: 500px;
transform: rotate3d(0, 1, 0, -90deg) translateZ(500px);
}
section:hover img:nth-of-type(5) {
width: 500px;
position: absolute;
height: 500px;
transform: rotate3d(1, 0, 0, 90deg) translateZ(500px);
}
section:hover img:nth-of-type(6) {
width: 500px;
position: absolute;
height: 500px;
transform: rotate3d(1, 0, 0, -90deg) translateZ(500px);
}
img:nth-of-type(7) {
position: absolute;
transform: rotate3d(0, 1, 0, 0deg) translateZ(125px);
}
img:nth-of-type(8) {
position: absolute;
transform: rotate3d(0, 1, 0, 180deg) translateZ(125px);
}
img:nth-of-type(9) {
position: absolute;
transform: rotate3d(1, 0, 0, 90deg) translateZ(125px);
}
img:nth-of-type(10) {
position: absolute;
transform: rotate3d(1, 0, 0, -90deg) translateZ(125px);
}
img:nth-of-type(11) {
position: absolute;
transform: rotate3d(0, 1, 0, 90deg) translateZ(125px);
}
img:nth-of-type(12) {
position: absolute;
transform: rotate3d(0, 1, 0, -90deg) translateZ(125px);
}
.small {
width: 250px;
height: 250px;
left: 625px;
top: 125px;
}
@keyframes slide {
0% {
transform: rotateY(0deg) rotateX(-30deg) rotateY(-80deg);
}
100% {
transform: rotateY(360deg) rotateX(-30deg) rotateY(-80deg);
}
}
section:hover img:nth-of-type(7) {
position: absolute;
transform: rotate3d(0, 1, 0, 0deg) translateZ(250px);
}
section:hover img:nth-of-type(8) {
position: absolute;
transform: rotate3d(0, 1, 0, 180deg) translateZ(250px);
}
section:hover img:nth-of-type(9) {
position: absolute;
transform: rotate3d(1, 0, 0, 90deg) translateZ(250px);
}
section:hover img:nth-of-type(10) {
position: absolute;
transform: rotate3d(1, 0, 0, -90deg) translateZ(250px);
}
section:hover img:nth-of-type(11) {
position: absolute;
transform: rotate3d(0, 1, 0, 90deg) translateZ(250px);
}
section:hover img:nth-of-type(12) {
position: absolute;
transform: rotate3d(0, 1, 0, -90deg) translateZ(250px);
}
</style>
标签
<div id="soul">
<section>
<img src="imgge/ak.jpg" alt="" class="big">
<img src="imgge/ak.jpg" alt="" class="big">
<img src="imgge/ak.jpg" alt="" class="big">
<img src="imgge/ak.jpg" alt="" class="big">
<img src="imgge/ak.jpg" alt="" class="big">
<img src="imgge/ak.jpg" alt="" class="big">
<img src="imgge/ak.jpg" alt="" class="small">
<img src="imgge/ak.jpg" alt="" class="small">
<img src="imgge/ak.jpg" alt="" class="small">
<img src="imgge/ak.jpg" alt="" class="small">
<img src="imgge/ak.jpg" alt="" class="small">
<img src="imgge/ak.jpg" alt="" class="small">
</section>
</div>
自动旋转轮播效果图