<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./reset.css">
<title>Document</title>
<style>
html{
perspective: 800px;
}
.total{
width: 400px;
height: 400px;
position: relative;
margin: 400px auto;
left:0;
right: 0;
bottom:0;
top:0;
transform-style: preserve-3d;
animation: nbateam 32s linear infinite ;
/* border: black 1px solid; */
/* background-color: #bfa; */
}
ul li{
outline: black solid 1px;
width: 400px;
height: 400px;
background-color: black;
background-repeat: no-repeat;
background-size: 400px 400px;
position:absolute;
text-align: center;
opacity: .90;
}
.team1{
background-image: url(./nba/gg1.jpg);
transform: rotateX(90deg) translateZ(200px);
}
.team2{
background-image: url(./nba/gg2.jpg);
transform: rotateX(90deg) translateZ(-200px);
}
.team3{
background-image: url(./nba/gg3.jpg);
transform: rotateY(90deg) translateZ(-200px);
}
.team4{
background-image: url(./nba/gg4.jpg);
transform: rotateY(90deg) translateZ(200px);
}
.team5{
background-image: url(./nba/gg5.jpg);
transform: translateZ(-200px);
} .team6{
background-image: url(./nba/gg6.jpg);
transform: translateZ(200px);
}
@keyframes nbateam {
from{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
to{
transform: rotateX(0turn) rotateY(3turn) rotateZ(2turn);
}
}
</style>
</head>
<body>
<ul class="total">
<li class="team1"></li>
<li class="team2"></li>
<li class="team3"></li>
<li class="team4"></li>
<li class="team5"></li>
<li class="team6"></li>
</ul>
</body>
</html>