JSFiddle - React, Tailwind, and code Playground

by Elena Shevchuk

HTML

<div class="parent">
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="box box4"></div>
    <div class="box box5"></div>
    <div class="box box6"></div>
</div>

<!-- Читай о css3 animation -->
<!-- У меня есть несколько квадратов разных размеров в верстке.
Я хочу сделать эффект как будто они как бумажки прилетают с разной скоростью откуда-то оттуда. Но для этого мне нужно получить несколько эффектов, будто лист летит и через себя в потоке воздухе перекручивается, прежде чем встать на место -->
<!-- Только более естественно, чем как здесь -->

CSS

.parent {
    margin-left: 300px;
    margin-top: 300px;
    width: 50%;
}
.box {
    float: left;
    width: 100px;
    height: 100px;
    margin: 10px;
    background: blue;
    -webkit-transition: all 1s;
    -webkit-transform: translate3d(0px, 0, 0)  rotate3d(0, 0, 0, 0deg);
    -webkit-transition-origin: 40% 100%;
}


.box1:hover{
    -webkit-transform: translate3d(100px, -100px, 0) rotate3d(-1, 0, 1, 830deg);
}