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

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

Содержание ▲

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

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

Слайд 1


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

Слайд 2


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

Слайд 3


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

Слайд 4


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

Слайд 5


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

Слайд 6


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

Слайд 7


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

Слайд 8


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

Слайд 9


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

Слайд 10


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

Слайд 11


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

Слайд 12


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

Слайд 13


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

Слайд 14


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

Слайд 15


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

Слайд 16


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

Слайд 17


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

Слайд 18


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

Слайд 19


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

Слайд 20


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

Слайд 21


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

Слайд 22


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

Слайд 23


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

Слайд 24


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

Слайд 25


Домашнее задание div { width: 100px; height: 100px; background-color: lightblue; border: 1px solid black; }
Описание слайда:
Домашнее задание div { width: 100px; height: 100px; background-color: lightblue; border: 1px solid black; }

Слайд 26


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

Скачать

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