Примеры трансформаци css через transform

Самые популярные типы трансформации css при верстке сайта - для тех кто верстает.

Пример 1. Вращения вокруг оси:

-

Пример 2. Плавность:

-

Пример 3. Наклон :

<style>
 /* Пример 1 */
.prim-kryg {width:100px; height:100px; background:red;}
.prim-kryg {animation: spin 5s linear 0s infinite;}
@keyframes spin {
from {transform:rotate(0deg);}
to   {transform:rotate(360deg);}
}
 /* Пример 2 */
.prim-kolor {width:100px; height:100px; background:red;}
.prim-kolor {animation: spcolor 5s linear 0s infinite; transition: color .6s cubic-bezier(0.19,1,.22,1), background 5s cubic-bezier(0.19,1,.22,1);}
@keyframes spcolor {
from {background:red;}
to   {background:green;}
}

 /* Пример 3 */
.prim-tr-naklon {width: 160px; height: 100px; background:red;  
 transform: skew(30deg);
}
</style>