<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ikun</title>
</head>
<style type="text/css">
.ikun{
animation-name:jkun;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
}
.ikun{
width: 200px;
height: 200px;
position: relative;
margin: 250px auto;
transform-style: preserve-3d;
}
.ikun> img{
width: 200px;
height: 200px;
position: absolute;
}
.ikun > img:nth-child(2){
left: -200px;
transform-origin: left;
transform: rotateY(-90deg);
}
.ikun > img:nth-child(3){
right: -200px;
transform-origin: left;
transform: rotateY(-90deg);
}
.ikun > img:nth-child(4){
top: -200px;
transform-origin: bottom;
transform: rotateX(-90deg);
}
.ikun > img:nth-child(5){
bottom: -200px;
transform-origin: top;
transform: rotateX(-90deg);
}
.ikun > img:nth-child(6){
transform: rotateZ(-90deg);
}
.ikun:hover>img:nth-child(1){
transform: rotateZ(-100px);
}
.ikun:hover>img:nth-child(2){
left: -300px;
transform-origin: left;
transform: rotateY(-90edg);
}
.ikun:hover>img:nth-child(3){
right: -300px;
transform-origin: left;
transform: rotateY(-90edg);
}
.ikun:hover>img:nth-child(4){
top: -300px;
transform-origin: bottom;
transform: rotateX(-90edg);
}
.ikun:hover>img:nth-child(5){
bottom: -300px;
transform-origin: top;
transform: rotateX(-90edg);
}
.ikun:hover>img:nth-child(6){
transform: rotateZ(-90edg);
}
</style>
<body>
<div class="ikun">
<img src="C:\Users\82192\Desktop\123.jpg" alt="">
<img src="C:\Users\82192\Desktop\123tgjpg.jpg" alt="">
<img src="C:\Users\82192\Desktop\1.jpg" alt="">
<img src="C:\Users\82192\Desktop\123.jpg" alt="">
<img src="C:\Users\82192\Desktop\123tgjpg.jpg" alt="">
<img src="C:\Users\82192\Desktop\1.jpg" alt="">
</div>
</body>
</html>