пример
Поворот <div> элемент:
div
{
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}
Попробуй сам " Определение и использование
Свойство преобразования применяет 2D или 3D трансформацию к элементу. Это свойство позволяет вращать, масштабировать, перемещать, наклон и т.д., элементы.
Чтобы лучше понять свойства преобразования, просмотреть демонстрацию .
| Значение по умолчанию: | none |
|---|---|
| Наследование: | no |
| Animatable: | yes. Read about animatable Try it |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object .style.transform="rotate(7deg)" Try it |
Поддержка браузеров
Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.
Числа следуют -webkit-, -moz- или -O- указать первую версию, которая работала с приставкой.
| Имущество | |||||
|---|---|---|---|---|---|
| transform (2D) | 36,0 4.0 -webkit- | 10,0 9.0 -ms- | 16,0 3.5 -moz- | 9.0 3.2 -webkit- | 23,0 15,0 -webkit- 10.5 -о- |
| transform (3D) | 36,0 12,0 -webkit- | 12.0 | 10,0 | 16,0 10,0 -moz- | 9.0 4.0 -webkit- |
Синтаксис
transform: none|transform-functions|initial|inherit;Значения свойств
| Стоимость | Описание | Сыграй |
|---|---|---|
| none | Определяет, что не должно быть никакого преобразования | Сыграй " |
| matrix( n,n,n,n,n,n ) | Определяет 2D преобразование, используя матрицу из шести значений | Сыграй " |
| matrix3d ( n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n ) | Определяет 3D преобразование, используя матрицу 4x4 из 16 значений | |
| translate( x,y ) | Определяет 2D перевод | Сыграй " |
| translate3d( x,y,z ) | Определяет 3D перевод | |
| translateX( x ) | Определяет перевод, используя только значение для оси Х | Сыграй " |
| translateY( y ) | Определяет перевод, используя только значение для оси Y. | Сыграй " |
| translateZ( z ) | Определяет 3D перевод, используя только значение для оси Z. | |
| scale( x,y ) | Определяет масштабное преобразование 2D | Сыграй " |
| scale3d( x,y,z ) | Определяет масштабное преобразование 3D | |
| scaleX( x ) | Определяет масштабное преобразование, давая значение для оси Х | Сыграй " |
| scaleY( y ) | Определяет масштабное преобразование, давая значение для оси Y. | Сыграй " |
| scaleZ( z ) | Определяет масштабное преобразование 3D, давая значение для Z-оси | |
| rotate( angle ) | Определяет вращение 2D, угол задается в параметре | Сыграй " |
| rotate3d( x,y,z,angle ) | Определяет вращение 3D | |
| rotateX( angle ) | Определяет 3D поворот вдоль оси Х | Сыграй " |
| rotateY( angle ) | Определяет 3D поворот вдоль оси Y. | Сыграй " |
| rotateZ( angle ) | Определяет 3D поворот вдоль оси Z. | Сыграй " |
| skew( x-angle,y-angle ) | Определяет 2D трансформацию перекоса вдоль Х- и Y-оси | Сыграй " |
| skewX( angle ) | Определяет 2D преобразование перекоса вдоль оси Х | Сыграй " |
| skewY( angle ) | Определяет 2D преобразование перекоса вдоль оси Y. | Сыграй " |
| perspective( n ) | Определяет перспективный вид для 3D трансформированного элемента | |
| initial | Устанавливает это свойство в значение по умолчанию. Читайте о первоначальный | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о унаследовать |
Еще примеры
Изображения , брошенные на стол
Этот пример демонстрирует , как создать "polaroid" фотографии и поворачивать изображения.
Похожие страницы
Учебник CSS: CSS 2D Трансформации
Учебник CSS: CSS 3D Трансформации
HTML DOM ссылка: transform property