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

Категория: Устройства и комплектующие
Нажмите для полного просмотра!
CSS-трансформации, слайд №1CSS-трансформации, слайд №2CSS-трансформации, слайд №3CSS-трансформации, слайд №4CSS-трансформации, слайд №5CSS-трансформации, слайд №6CSS-трансформации, слайд №7CSS-трансформации, слайд №8CSS-трансформации, слайд №9CSS-трансформации, слайд №10CSS-трансформации, слайд №11CSS-трансформации, слайд №12CSS-трансформации, слайд №13CSS-трансформации, слайд №14CSS-трансформации, слайд №15CSS-трансформации, слайд №16CSS-трансформации, слайд №17CSS-трансформации, слайд №18CSS-трансформации, слайд №19CSS-трансформации, слайд №20CSS-трансформации, слайд №21CSS-трансформации, слайд №22CSS-трансформации, слайд №23CSS-трансформации, слайд №24CSS-трансформации, слайд №25CSS-трансформации, слайд №26
Скачать

Содержание ▲

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

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

Слайд 1


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

Слайд 2


transform Трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций Синтаксис transform: <функция>
Описание слайда:
transform Трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций Синтаксис transform: <функция>

Слайд 3


Функции трансформации: translate Сдвигает элемент на заданное значение по горизонтали и вертикали Синтаксис transform: translate(x, y)
Описание слайда:
Функции трансформации: translate Сдвигает элемент на заданное значение по горизонтали и вертикали Синтаксис transform: translate(x, y)

Слайд 4


Функции трансформации: translate: пример <!DOCTYPE html> <html> <head> <style> body{ background-color:lightblue; } div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; transform: translate(50px,100px); } </style> </head>
Описание слайда:
Функции трансформации: translate: пример <!DOCTYPE html> <html> <head> <style> body{ background-color:lightblue; } div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; transform: translate(50px,100px); } </style> </head>

Слайд 5


Функции трансформации: translate: пример
Описание слайда:
Функции трансформации: translate: пример

Слайд 6


Функции трансформации: rotate Поворот элемента на заданный угол Синтаксис transform: rotate(угол)
Описание слайда:
Функции трансформации: rotate Поворот элемента на заданный угол Синтаксис transform: rotate(угол)

Слайд 7


Функции трансформации: rotate: пример <!DOCTYPE html> <html> <head> <style> body{background-color:lightblue;} div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; } div#myDiv { transform: rotate(20deg); } </style> </head>
Описание слайда:
Функции трансформации: rotate: пример <!DOCTYPE html> <html> <head> <style> body{background-color:lightblue;} div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; } div#myDiv { transform: rotate(20deg); } </style> </head>

Слайд 8


Функции трансформации: rotate: пример
Описание слайда:
Функции трансформации: rotate: пример

Слайд 9


Функции трансформации: rotate: пример <!DOCTYPE html> <html> <head> <style> body{ background-color:lightblue; } div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; } div#myDiv{ transform: rotate(-20deg); } </style> </head>
Описание слайда:
Функции трансформации: rotate: пример <!DOCTYPE html> <html> <head> <style> body{ background-color:lightblue; } div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; } div#myDiv{ transform: rotate(-20deg); } </style> </head>

Слайд 10


Функции трансформации: rotate: пример
Описание слайда:
Функции трансформации: rotate: пример

Слайд 11


Функции трансформации: scale Масштаб элемента по горизонтали и вертикали Синтаксис transform: scale(x,y);
Описание слайда:
Функции трансформации: scale Масштаб элемента по горизонтали и вертикали Синтаксис transform: scale(x,y);

Слайд 12


Функции трансформации: scale: пример <!DOCTYPE html> <html> <head> <style> body{ background-color:#80CBC4; } div { margin: 150px; width: 200px; height: 100px; background-color: yellow; border: 1px solid black; transform: scale(2,3); } </style> </head>
Описание слайда:
Функции трансформации: scale: пример <!DOCTYPE html> <html> <head> <style> body{ background-color:#80CBC4; } div { margin: 150px; width: 200px; height: 100px; background-color: yellow; border: 1px solid black; transform: scale(2,3); } </style> </head>

Слайд 13


Функции трансформации: scale: пример
Описание слайда:
Функции трансформации: scale: пример

Слайд 14


Функции трансформации: scale: пример <!DOCTYPE html> <html> <head> <style> body{ background-color:#B2EBF2; } div { width: 200px; height: 100px; background-color: yellow; border: 1px solid black; transform: scale(0.5,0.5); } </style> </head>
Описание слайда:
Функции трансформации: scale: пример <!DOCTYPE html> <html> <head> <style> body{ background-color:#B2EBF2; } div { width: 200px; height: 100px; background-color: yellow; border: 1px solid black; transform: scale(0.5,0.5); } </style> </head>

Слайд 15


Функции трансформации: scale: пример
Описание слайда:
Функции трансформации: scale: пример

Слайд 16


Функции трансформации: skewX Наклоняет элемент на заданный угол по вертикали Синтаксис transform: skewX(угол)
Описание слайда:
Функции трансформации: skewX Наклоняет элемент на заданный угол по вертикали Синтаксис transform: skewX(угол)

Слайд 17


Функции трансформации: skewX: пример <!DOCTYPE html> <html> <head> <style> body{ background-color:#B2EBF2; } div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; } div#myDiv { transform: skewX(20deg); } </style> </head>
Описание слайда:
Функции трансформации: skewX: пример <!DOCTYPE html> <html> <head> <style> body{ background-color:#B2EBF2; } div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; } div#myDiv { transform: skewX(20deg); } </style> </head>

Слайд 18


Функции трансформации: skewX: пример
Описание слайда:
Функции трансформации: skewX: пример

Слайд 19


Функции трансформации: skewY Наклоняет элемент на заданный угол по горизонтали Синтаксис transform: skew(y-угол)
Описание слайда:
Функции трансформации: skewY Наклоняет элемент на заданный угол по горизонтали Синтаксис transform: skew(y-угол)

Слайд 20


Функции трансформации: skewY: пример <!DOCTYPE html> <html> <head> <style> body{ background-color:#B2EBF2; } div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; } div#myDiv { transform: skewY(20deg); } </style> </head>
Описание слайда:
Функции трансформации: skewY: пример <!DOCTYPE html> <html> <head> <style> body{ background-color:#B2EBF2; } div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; } div#myDiv { transform: skewY(20deg); } </style> </head>

Слайд 21


Функции трансформации: skewY: пример
Описание слайда:
Функции трансформации: skewY: пример

Слайд 22


Функции трансформации: skew Используется для наклона (искажения) элемента относительно координатных осей Если указано одно значение, второе будет определено браузером автоматически Синтаксис transform: skew(x-угол,y-угол)
Описание слайда:
Функции трансформации: skew Используется для наклона (искажения) элемента относительно координатных осей Если указано одно значение, второе будет определено браузером автоматически Синтаксис transform: skew(x-угол,y-угол)

Слайд 23


Функции трансформации: skew: пример <!DOCTYPE html> <html> <head> <style> body{ background-color:#B2EBF2; } div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; } div#myDiv { transform: skew(20deg,10deg); } </style> </head>
Описание слайда:
Функции трансформации: skew: пример <!DOCTYPE html> <html> <head> <style> body{ background-color:#B2EBF2; } div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; } div#myDiv { transform: skew(20deg,10deg); } </style> </head>

Слайд 24


Функции трансформации: skew: пример
Описание слайда:
Функции трансформации: skew: пример

Слайд 25


Домашнее задание <!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background-color: lightblue; border: 1px solid black; } </style> </head> <body> <div></div> </body> </html>
Описание слайда:
Домашнее задание <!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background-color: lightblue; border: 1px solid black; } </style> </head> <body> <div></div> </body> </html>

Слайд 26


Домашнее задание Используйте код на 25 слайде С помощью свойства transform переместите элемент <div> на 100px вправо и на 200px вниз С помощью свойства transform поверните элемент <div> на 45 градусов С помощью свойства transform измените размер <div>: уменьшите ширину в 2 раза и увеличьте высоту в 3 раза С помощью свойства transform:skew наклоните элемент <div> на 20 градусов по оси X и на 30 градусов по оси Y
Описание слайда:
Домашнее задание Используйте код на 25 слайде С помощью свойства transform переместите элемент <div> на 100px вправо и на 200px вниз С помощью свойства transform поверните элемент <div> на 45 градусов С помощью свойства transform измените размер <div>: уменьшите ширину в 2 раза и увеличьте высоту в 3 раза С помощью свойства transform:skew наклоните элемент <div> на 20 градусов по оси X и на 30 градусов по оси Y

Скачать

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