So fächert man Karten in einen Kreis , so dass die letzte Karte wieder unter der ersten liegt
Code
<style>
body {
height: 100vh;
margin: 0;
display: flex;
align-items: center;
flex-direction:column;
justify-content: center;
overflow:hidden;
}
#all{
perspective: 1000px;
transform-style: preserve-3d;
transform:rotate(25deg);
animation:10s dreh linear infinite;
animation-play-state: paused;
width:50vw;
height:50vw;
}
#all:hover{
animation-play-state: running;
}
.helfer{
width:calc(100vw / 5);
height:calc(100vw / 5);
position:absolute;
left: 50%;
top: 0;
overflow: visible;
border: 2px solid blue;
}
.helfer:hover{
}
.conti{
animation:13s dreh1 linear infinite;
animation-play-state: running;
}
.conti:hover{
animation:1s dreh2 linear infinite;
}
#all div .conti{
width: 100%;
height: 100%;
font-size:calc(100vw / 5);
text-align:center;
display: flex;
align-items: center;
justify-content: center;
transition: transform 5s;
cursor: pointer;
}
#a1{
transform:rotateZ(72deg) rotateY(-30deg);
background:red;
transform-origin: 0 100%;
}
#a2{
transform:rotateZ(144deg) rotateY(-30deg);
background:blue;
transform-origin: 0 100%;
}
#a3{
transform:rotateZ(216deg) rotateY(-30deg);
background:green;
transform-origin: 0 100%;
}
#a4{
transform:rotateZ(288deg) rotateY(-30deg);
background:orange;
transform-origin: 0 100%;
}
#a5{
background:lightgreen;
transform:rotateZ(0deg) rotateY(-30deg);
transform-origin: 0 100%;
}
.flip{
background:black;
}
@keyframes dreh{
0%{
transform:rotateZ(0deg);
transform-origin: 50% 50%;
}
100%{
transform:rotateZ(360deg);
transform-origin: 50% 50%;
}
}
@keyframes dreh2{
0%{
transform:rotate(0deg);
transform-origin: 50% 50%;
}
100%{
transform:rotate(360deg);
transform-origin: 50% 50%;
}
}
@keyframes dreh1{
0%{
transform:rotate(-0deg);
transform-origin: 50% 50%;
}
100%{
transform:rotate(-360deg);
transform-origin: 50% 50%;
}
}
</style>
<body>
<h1>Karten in einen Kreiss fächern</h1>
<div id="all">
<div class="helfer" id="a1"><div class="conti">B</div></div>
<div class="helfer" id="a2"><div class="conti">A</div></div>
<div class="helfer" id="a3"><div class="conti">S</div></div>
<div class="helfer" id="a4"><div class="conti">T</div></div>
<div class="helfer" id="a5"><div class="conti">I</div></div>
</div>
</body>