🗊Презентация CSS-трансформации

Категория: Образование
Нажмите для полного просмотра!
/ 12

Вы можете ознакомиться и скачать презентацию на тему CSS-трансформации . Доклад-сообщение содержит 12 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации


Слайд 1





CSS-трансформации
Описание слайда:
CSS-трансформации

Слайд 2





Атрибут transform
-moz-transform для Firefox 
-webkit-transform для Chrome и Safari 
-o-transform для Opera 
-ms-transform для Internet Explorer 9+
Описание слайда:
Атрибут transform -moz-transform для Firefox -webkit-transform для Chrome и Safari -o-transform для Opera -ms-transform для Internet Explorer 9+

Слайд 3





Поворот блока
transform: rotate(45deg);
transform: rotate(-30deg);
transform: rotate(135deg);
transform: rotate(-270deg);
transform: rotate(360deg);
Описание слайда:
Поворот блока transform: rotate(45deg); transform: rotate(-30deg); transform: rotate(135deg); transform: rotate(-270deg); transform: rotate(360deg);

Слайд 4





Масштабирование блока
transform: scale(1.5);
transform: scale(0.7);
transform: scaleX(3);
transform: scaleY(0.2);
Описание слайда:
Масштабирование блока transform: scale(1.5); transform: scale(0.7); transform: scaleX(3); transform: scaleY(0.2);

Слайд 5





Скос
transform: skew(30deg, 20deg);
transform: skew(-15deg, -50deg);
Описание слайда:
Скос transform: skew(30deg, 20deg); transform: skew(-15deg, -50deg);

Слайд 6





Смещение
transform: translate(30px, 20px);
transform: translate(-15px, -50px);
Описание слайда:
Смещение transform: translate(30px, 20px); transform: translate(-15px, -50px);

Слайд 7





Переходы (transition)
transition-property - свойство, на которое распространяется действие трансформации. Можно указать несколько через запятую. Все свойства – all
transition-property: background-color;
transition-property: color,border;
transition-property: all;
Описание слайда:
Переходы (transition) transition-property - свойство, на которое распространяется действие трансформации. Можно указать несколько через запятую. Все свойства – all transition-property: background-color; transition-property: color,border; transition-property: all;

Слайд 8





Переходы (transition)
transition-duration – длительность анимации
transition-duration: 1s;
transition-duration: 100s;
Описание слайда:
Переходы (transition) transition-duration – длительность анимации transition-duration: 1s; transition-duration: 100s;

Слайд 9





Переходы (transition)
transition-delay – задержка после которой начнется анимация
transition-delay: 1s;
transition-delay: 100s;
Описание слайда:
Переходы (transition) transition-delay – задержка после которой начнется анимация transition-delay: 1s; transition-delay: 100s;

Слайд 10





Переходы (transition)
timing-function – функция вычисления промежуточных значений атрибутов
Описание слайда:
Переходы (transition) timing-function – функция вычисления промежуточных значений атрибутов

Слайд 11





Функции перехода
Описание слайда:
Функции перехода

Слайд 12





Функции перехода
Описание слайда:
Функции перехода



Похожие презентации
Mypresentation.ru
Загрузить презентацию