Главная » Анимация css » Примеры трансформаци css через transform
145 0  

Примеры трансформаци 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>

Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2020