3 dキューブアニメーション
3281 ワード
<style>
.parent{
width: 100px;
height: 100px;
border: 10px solid black;
padding: 100px;
margin: 30px auto;
}
.son{
position: relative;
width: 100px;
height: 100px;
transition: 1s;
transform-style: preserve-3d;
perspective:500px;
transform-origin: center center 50px;
animation: 1s move6 5s both linear infinite;
}
.son div{
position: absolute;
width: 100px;
height: 100px;
}
.son div:nth-child(1){
animation: 1s move1 both;
}
.son div:nth-child(2){
animation: 1s move2 1s both;
}
.son div:nth-child(3){
animation: 1s move3 2s both;
}
.son div:nth-child(4){
animation: 1s move4 3s both;
}
.son div:nth-child(5){
animation: 1s move5 4s both;
}
.son div:nth-child(6){
background: yellow;
}
@keyframes move1 {
100%{
position: absolute;
top: -100px;
width: 100px;
height: 100px;
background: magenta;
transform-origin: bottom;
transform: rotateX(-90deg);
}
}
@keyframes move2 {
100%{
position: absolute;
left: -100px;
width: 100px;
height: 100px;
background: greenyellow;
transform-origin: right;
transform: rotateY(90deg);
}
}
@keyframes move3 {
100%{
position: absolute;
top: 100px;
width: 100px;
height: 100px;
background: lemonchiffon;
transform-origin: top;
transform: rotateX(90deg);
}
}
@keyframes move4 {
100%{
position: absolute;
left: 100px;
width: 100px;
height: 100px;
background: mediumblue;
transform-origin: left;
transform: rotateY(-90deg);
}
}
@keyframes move5 {
100%{
position: absolute;
width: 100px;
height: 100px;
background: lightcoral;
transform: translateZ(100px);
}
}
@keyframes move6 {
100%{
transform: rotateX(360deg) rotateY(360deg);
}
}
</style>
<div class="parent">
<div class="son">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
</code></pre>
</article>
</div>
</div>