2.
2.

Bir elemanı CSS 3 ile döndürme

Web tasarımcıları zaman zaman bir elemanı döndürme sorunuyla karşı karşıya kalırlar. CSS 3 ile bu soruna oldukça basit bir çözüm var. Yine, tarayıcılar arası uyumluluk için birden çok özelliğin belirtilmesi gerekir. Aşağıda için bir örnek kod bir elemanı 90 derece döndürmek.

CSS kodu

#rotate_element (
-webkit-dönüşüm: döndürme (90 derece); // öğeyi farklı tarayıcılar için genişlet



dönüştürmek: döndürmek (90 derece);
}

Metni CSS 3 ile Hizalama ve Yönlendirme

Şimdi mülk hakkında daha fazla bilgi yazma modu... Öğe metninin hizalamasını (sol - sağ) ve en ilginç olanı yönünü (yatay veya dikey) ayarlamanıza olanak tanır! Bakıyoruz ve denedik:

lr-tb metin soldan sağa doğru akar.
rl-tb metin sağdan sola yönlendirilir.
tb-rl metin dikey olarak yönlendirilir ve üste ve sağa hizalanır.
bt-rl metin dikey olarak yönlendirilir ve alta ve sağa hizalanır.
tb-lr metin dikey olarak yönlendirilir ve üste ve sola hizalanır.
bt-lr metin dikey olarak yönlendirilir ve alta ve sola hizalanır.
İfadeyi örnek olarak kullanma metin buraya gelir CSS özelliklerinin etkisini düşünebilirsiniz

CSS kodu

Metin (
yazma modu: lr-tb; / * metin soldan sağa akar * /
}

Metin 1 (
yazma modu: rb-tb; / * metin sağdan sola akar * /
}

Metni 90 derece döndürme ve CSS 3 metnini hizalama örneği

İşte tam bir örnek. Metni 90 derece döndürün. Bunu yapmak için, rotaryText tanımlayıcısı ile bir blok oluşturmanız ve buna CSS özelliklerini ayarlamanız yeterlidir.

HTML ve CSS kodu

Örnek bir elemanın CSS ile 90 derece döndürülmesi aşağıdaki bağlantıdan izlenebilir.

Bugün CSS3 sayesinde bize sunulan harika bir etkiye göz atacağız. Bir bloğu veya görüntüyü döndürmekle ilgilidir. Sitenin arayüzüne harika bir şekilde uyuyor ve bu derste uzmanlaştıktan sonra bu efekti projelerinize uygulayabileceksiniz.

Yani, bazı içeriğe sahip bir dizi blokumuz var. Bir bloğun üzerine gelindiğinde kendi ekseni etrafında dönmesini ve arkada bilgi göstermesini istiyoruz. Sanırım herkes bir zamanlar kağıt oynadı ve herkes onları alt üst etmek zorunda kaldıkları o heyecan verici anı hatırlıyor. Şimdi de aynısını yapacağız. İşte orijinal örneğimiz:

CSS kodumuzu yazmaya başlayalım. 3D dönüşümlerle çalıştığımız için yapmamız gereken ilk şey, nesnemizin bakış açısına olan mesafesini ayarlamaktır. Ve işte ilk bok kodu:

Flip-container (-webkit-perspektif: 1000; -moz-perspektif: 1000; -ms-perspektif: 1000; perspektif: 1000;)

Başka bir numara ayarlayabilirsiniz. Kendinizi deneyin. Oyun kartımızın ön (.ön) ve arka (.arka) kısımlarının mutlaka son konumda birbirleriyle "üst üste gelecek" şekilde konumlandırılması gerekir. Ayrıca, animasyon sırasında ters çevrilmiş öğelerin arka tarafının görüntülenmediğinden emin olmamız gerekir. backface-visibility özelliği bu konuda bize yardımcı olacaktır:

Ön, .back (-webkit-backface-visibility: gizli; -moz-backface-visibility: gizli; -ms-backface-visibility: gizli; arka yüz-görünürlük: gizli; genişlik: %100; yükseklik: %100; konum: mutlak; üst: 0; sol: 0;)

Ön taraf için z-endeksini (varsayılan durumda en üstte olacak şekilde) ayarlayalım ve dikey eksen etrafındaki varsayılan dönüş açılarını tanımlayalım:

/ * ön, arkanın üzerine yerleştirilir * / .front (-webkit-transform: döndürmeY (0 derece); -moz-dönüşüm: döndürmeY (0 derece); -ms-transform: döndürmeY (0 derece); -o-dönüştürme: döndürmeY ( 0deg ); transform: döndürmeY (0deg); z-index: 2;) / * geri, başlangıçta gizli taraf * / .back (dönüştürme: döndürmeY (180deg); -webkit-transform: döndürmeY (180deg); -moz-dönüşüm : döndürmeY (180 derece); -ms-dönüşüm: döndürmeY (180 derece); -o-dönüşüm: döndürmeY (180 derece);)

Fareyle üzerine gelindiğinde kartlarımız dönecek, kenarlarının açıları 0'dan 180 dereceye ve 180 dereceden 0'a değişecek:

/ * ön, arkanın üzerine yerleştirilir * / .flip-container: vurgulu .front (dönüştürme: döndürmeY (180 derece); -webkit-dönüştürme: döndürmeY (180 derece); -moz-dönüştürme: döndürmeY (180 derece); -ms- transform: döndürmeY (180deg); -o-dönüşüm: döndürmeY (180deg);) / * geriye, başlangıçta gizli taraf * / .flip-container: üzerine gelin .back (-webkit-transform: döndürmeY (0deg); -moz-transform : döndürmeY (0 derece); -ms-dönüşüm: döndürmeY (0 derece); -o-dönüşüm: döndürmeY (0 derece); dönüştürme: döndürmeY (0 derece);)

Çalışmalarımızı tamamlamaya yaklaştık. Geriye kalan tek şey, tarayıcıya alt öğelerin 3B uzayda nasıl görüntülenmesi gerektiğini açıklığa kavuşturmaktır. Bu özellik, transform özelliği ile birlikte kullanılmalıdır ve transform-style olarak adlandırılır. Bu özellik .back ve .front'a değil, .flipper sınıfı olan bloğa uygulanmalıdır, aksi takdirde Opera tarayıcısında hoş olmayan bir sürprizimiz olacaktır.

Flipper (-webkit-transform-style: save-3d; -moz-transform-style: save-3d; -ms-transform-style: save-3d; -o-transform-style: save-3d; transform-style: koru-3d;)

Yaşasın, başardık. Az önce CSS ile nasıl döndürüleceğini öğrendik. Hepsinden iyisi, tüm modern tarayıcılar bunu destekliyor. Evet, Internet Explorer kullanıcıları da sürüm 10'dan itibaren bu güzelliği görebilirler. Ne yazık ki, Rusya'da bir dizi eski IE8 ve IE9'u sürüklemek gibi kötü bir uygulama var. Bu yüzden müşterim, eski tarayıcılarda gezinme anında bir araç ipucunun gösterilmesini istedi. Ne yapabileceğimize bir bakalım.

İlk akla gelen @supports yönergesini kullanmaktır. Şunları yazabiliriz:

@supports (transform-style: save-3d) veya (-moz-transform-style: save-3d) veya (-webkit-transform-style: save-3d) (/ * * / / * 3D'yi destekleyen tarayıcılar için stiller dönüştürür * /)

Ne yazık ki, IE 11 bile bu konuda hiçbir şey bilmiyor, o yüzden eski moda yolu kullanalım:

ie.css dosyasında, araç ipucumuz için gereken stilleri açıklayacağız. buraya eklemiyorum çünkü bu makalenin kapsamı dışındadır (ve orada ilginç bir şey yoktur). Dilerseniz CSS dikey döndürme örneğimizde görebilirsiniz. Peki ya yatay rotasyonla ilgileniyorsak? Bu durumda kodumuz şu şekilde dönüştürülür:

Vertical.flip-container (konum: göreceli;) .vertical.flip-container .flipper (-webkit-transform-origin: 100% 213.5px; -moz-transform-origin: 100% 213.5px; -ms-transform-origin : %100 213,5 piksel; dönüştürme kaynağı: %100 213,5 piksel;) .vertical.flip-container: vurgulu .back, .vertical.flip-container.hover .back (-webkit-transform: döndürmeX (0 derece); -moz -dönüştürme: döndürmeX (0 derece); -o-dönüştürme: döndürmeX (0 derece); -ms-dönüşüm: döndürmeX (0 derece); dönüştürme: döndürmeX (0 derece);) .vertical .back, .vertical.flip-container: üzerine gelin. front, .vertical.flip-container.hover .front (-webkit-transform: döndürmeX (180deg); -moz-transform: döndürmeX (180deg); -o-dönüşüm: döndürmeX (180deg); -ms-dönüşüm: döndürmeX ( 180 derece); dönüştürme: döndürmeX (180 derece);)

• Tercüme

Merhaba sevgili habradrug! İnternette CSS3'te birçok harika dönüşüm ve geçiş örneği var. Bu makalede, temel CSS3 temellerini gözden geçireceğiz ve böyle bir şeyin nasıl oluşturulacağını öğreneceğiz. Bu eğitim, CSS3 ile yeni tanışmaya başlayanlar için faydalı olacaktır. Hadi başlayalım!

Koordinat sistemi

Bir nesnenin hareketinin nasıl çalıştığını anlamayı kolaylaştırmak için bir koordinat sisteminde çalışacağız.


Bununla birlikte, koordinat sistemimizin bir özelliği vardır: y ekseni normalden ters yöne yönlendirilir. Niye ya? Gerçek şu ki, HTML ve CSS (örneğin, ActionScript ile birlikte), web sayfası sol üst köşeden başlayıp aşağı indiği için ters koordinat sistemini kullanır.
Not: HTML ve CSS yapısına zaten aşina olduğunuzu varsayacağız. CSS dosyasının nasıl kurulacağı, resimlerin nasıl yerleştirileceği vb. açıklamaları atlayacağım. Görüntüleri canlandırmaya odaklanacağız. Becerilerinizin yüksek düzeyde olup olmadığından emin değilseniz, bilmeniz gereken her şeyi öğrenmek için "30 gün içinde HTML ve CSS" (ücretsiz ve İngilizce) kursuna bir göz atmanızı öneririz.

1: Yatay hareket

Göstereceğimiz ilk hareket yataydır. Nesneleri soldan sağa ve sağdan sola hareket ettireceğiz.

Sağa hareket

Nesneyi taşımak için kullanacağımız dönüştürmek: çevir (x, y) burada X pozitif bir sayıdır ve Y = 0'dır.


HTML
Favori kod düzenleyicinizi açın ve aşağıdakileri girin:

Resim için üç sınıf tanımladık:

• nesne: Nesnemizin ana kurallarını oluşturmak.
• van: Her tür animasyonu göstermek için çeşitli nesneler kullanacağız.
• move-right: Bu sınıfı kullanarak nesnemizi hareket ettireceğiz.

CSS
İlk olarak nesnemizi (kamyon resmi) ortasına yerleştireceğiz.
.object (konum: mutlak;) .van (üst: %45; sol: %44;)
Bu örnekte nesneyi 350 piksel sağa iteceğiz. Kullanılan sözdizimi dönüştür: çevir (350 piksel, 0);... Ayrıca, nesne yalnızca üzerine geldiğinizde hareket edecektir: #axis: .move-sağa üzerine gelin.

#axis: üzerine gelin .move-right (dönüştürme: çevir (350 piksel, 0); -webkit-dönüşüm: çeviri (350 piksel, 0); / ** Chrome ve Safari ** / -o-dönüştürme: çeviri (350 piksel, 0) ; / ** Opera ** / -moz-transform: çeviri (350 piksel, 0); / ** Firefox ** /)
Parametre dönüştürmek nesneyi yalnızca bir noktadan diğerine hareket ettirir, ancak bu hareketin bir animasyonunu oluşturmaz. Bunu düzeltmek için .object sınıfına bir move parametresi eklemeniz gerekir.

Nesne (konum: mutlak; geçiş: tüm 2 saniyelik kolaylıklar; -webkit-geçiş: tüm 2 saniyelik kolaylıklar; / ** Chrome ve Safari ** / -moz-geçiş: tüm 2 saniyelik kolaylıklar ; / ** Firefox ** / -o-geçiş: tüm 2 saniyelik kolay giriş; / ** Opera ** /)
Bu hareket kuralı, tarayıcıya canlandırmasını söyleyecektir. herşey nesne parametreleri açık 2 saniye(gecikme yok) işlevi kullanarak giriş-çıkış kolaylığı.
6 farklı hareket zamanlama fonksiyonunu kullanabiliriz:

• doğrusal: hareket baştan sona sabit bir hızda gerçekleşir.
• kolaylaştırmak: Hareket yavaş başlar ve ardından hızlanır.
• kolaylık: Hareket etme yavaş başlar.
• rahatlama: Hareket etmek yavaş biter.
• giriş-çıkış kolaylığı: Hareket yavaş başlar ve yavaş biter.
• kübik-bezier: yer değiştirme değerinin manuel tanımı.

Sola hareket

Bir nesneyi sola hareket ettirmek için eksene negatif bir değer koymanız yeterlidir. AH, süre Y değişmeden kalır. Bizim durumumuzda, nesneyi şuraya taşıyacağız - 350 piksel Sola.

HTML
Yeni bir html belgesi oluşturun ve aşağıdaki kodu yapıştırın:

Bu sefer sınıfı kullanıyoruz Sola hareket et, nesneyi sola çevirmek için

CSS
Şimdi OX ekseni için -350px girelim. dönüştür: çevir (-350 piksel, 0);- nesneyi sola hareket ettirin.
#axis: hover .move-left (dönüştürme: çeviri (-350 piksel, 0); -webkit-dönüşüm: çeviri (-350 piksel, 0); / ** Safari ve Chrome ** / -o-dönüştürme: çeviri (-350 piksel) , 0); / ** Opera ** / -moz-transform: translate (-350px, 0); / ** Firefox ** /)
Daha önce taşınma kurallarını zaten tanımladığımız için tekrar yapmamıza gerek yok.

2: Dikey hareket

Bir nesneyi dikey olarak hareket ettirmek zor olmayacaktır, çünkü yatay olanla aynıdır. Tek fark, değeri kullanacağımızdır. -y yükselmek ve değer vermek y aşağı hareket etmek için.

Harekete geçmek

HTML
HTML şablonu önceki örneklerle aynıdır. Ancak, nesnemizi bir roketle değiştireceğiz (açıklık için) ve bir hareket sınıfı atayacağız.

CSS
Tıpkı kamyon gibi, roketi ortalayacağız:
.rocket (üstte: %43; sol: %44;)
Daha önce de belirttiğimiz gibi, Y koordinatı negatif olmalıdır. Bizim durumumuzda, nesneyi 350 piksel yukarı taşıyacağız.

#axis: üzerine gelin .move-up (dönüştürme: çevir (0, -350 piksel); -webkit-dönüşüm: çeviri (0, -350 piksel); -o-dönüşüm: çeviri (0, -350 piksel); -moz-dönüşüm: çevir (0, -350 piksel);)

aşağı hareket

Tahmin ettiniz, nesneyi aşağı hareket ettirmek için Y koordinatı pozitif olmalı ve X koordinatı 0'a eşit olmalıdır. Sözdizimi: çevir (0, y);

HTML

CSS
#axis: üzerine gelin .move-down (dönüştürme: çevir (0.350 piksel); -webkit-dönüştürme: çeviri (0.350 piksel); -o-dönüşüm: çeviri (0.350 piksel); -moz-dönüşümü: çeviri (0.350 piksel); )

3: Çapraz hareket

Nesneyi çapraz olarak hareket ettirmek için parametreleri eşleştireceğiz x ve y... Sözdizimi aşağıdaki gibi olacaktır: dönüştürmek: çevir (x, y). Yöne bağlı olarak, değer x ve y hem olumlu hem de olumsuz olabilir.

HTML

CSS
#axis: hover .move-ne (dönüştürme: çevir (350 piksel, -350 piksel); -webkit-dönüşüm: çeviri (350 piksel, -350 piksel); -o-dönüşüm: çeviri (350 piksel, -350 piksel); -moz-dönüşüm: çevir (350 piksel, -350 piksel);)

4: Döndürme

CSS3'te döndürme, derece koordinatlarıyla (0 ° ila 360 ° arasında) kontrol edilir. Bir nesneyi döndürmek için aşağıdaki seçenekleri uygulayın: dönüştürmek: döndürmek (derece); nerede n- derece.

Saat yönünde dönüş

Nesneyi saat yönünde döndürmek için pozitif bir değer uygulayın. döndürmek (derece).

HTML

CSS
#axis: üzerine gelin .rotate360cw (dönüştürme: döndürme (360 derece); -webkit-dönüşüm: döndürme (360 derece); -o-dönüştürme: döndürme (360 derece); -moz-dönüştürme: döndürme (360 derece);)

Saat yönünün tersine dönüş

Nesneyi saat yönünün tersine döndürmek için, nesneye negatif bir değer uygulayın. döndürmek (derece).

HTML

CSS
#axis: üzerine gelin .rotate360ccw (dönüştürme: döndür (-360deg); -webkit-dönüşüm: döndür (-360deg); -o-dönüşüm: döndür (-360deg); -moz-dönüşüm: döndür (-360deg);)

5: Ölçekleme

Ölçekleme, CSS3'ün ilginç bir özelliğidir. parametreyi kullanma ölçek (n) veya parametre ölçek (x, y), nesneyi doğrudan HTML çerçevesi içinde büyütebilir veya küçültebiliriz. Nesne, X ekseninin genişlik ve Y'nin yükseklik olduğu n / x, y değerine göre yeniden boyutlandırılacaktır.
Aşağıdaki örneğe bir göz atalım.

transform CSS özelliği ("dönüşüm" kelimesinden gelir), html sayfalarındaki bir öğeyi dönüştürmenize olanak tanır. Örneğin, yapabilirsiniz

• döndürmek
• yerinden etmek
• yeniden ölçeklendirmek
• can
• yukarıdaki eylemleri birleştir

Bu özellik sayesinde JavaScript kullanmadan ilginç efektler oluşturabilirsiniz, bu da tarayıcınızı hızlandırmanızı sağlar. Etkiyi zaman gecikmeleri ile birleştirmenin mümkün olduğunu da not etmek önemlidir.

1. CSS dönüşümü sözdizimi

dönüştürmek: dönüştürmek1 [dönüştürmek2];

Nesneyle aynı anda birkaç eyleme izin verilir (örneğin, döndürme, kaydırma ve ölçeği değiştirme).

Tarayıcılar hakkında bir not

Tüm tarayıcılar dönüştürmeyi desteklemez. CSS satıcı öneklerini kullanmalıdır:

• -ms-transform - IE9 ve daha eski sürümler için (sürüm 9'dan önce dönüştürme desteklenmez)
• -webkit-transform - Chrome, Safari, Android ve iOS için
• -o-transform - 12.10 sürümüne kadar Opera için
• -moz-transform - Firefox için 16.0 sürümüne kadar

2.dönüştürme: döndürme (x) - nesnenin dönüşü

Bir elemanı döndürmek için döndürme (x) komutu vardır. Bir nesneyi saat yönünde veya saat yönünün tersine x derece döndürmenizi sağlar. x değeri derece derece olarak belirtilmelidir

Örnek 1. html'de bir nesneyi dönüştürme yoluyla döndürme

Примечание

Свойства:

-ms-transform : rotate (20deg ); -webkit-transform : rotate (20deg ); -o-transform : rotate (20deg ); -moz-transform : rotate (20deg );

Нужны для корректной работы в старых версиях браузеров. В следующих примерах мы также будем их писать.

Пример #2. Вращение объекта в html при наведении курсора

Создадим класс kvadrat2 и пропишем для него псевдокласс :hover , в котором и будет прописано вращение и смена цвета на более светлый (с #444 на #888).

На странице преобразуется в следующее

Но это вращение происходит резко и не смотрится "эффектно". Это можно легко исправить сделав сглаживание. В следующем примере будет реализована анимация.

Пример #3. Плавное вращение при наведении курсора (анимация) в html

Для плавного вращения (или другими словами сглаживания) необходимо прописать еще одно свойство transition . Это свойство отвечает за время и эффект сглаживания. В данном примере рассматривается самый простой случай с переходом за 1 секунду с линейной скоростью linear

На странице преобразуется в следующее

Стало гораздо симпатичнее и такая анимация дает множество возможностей для создания эффектов на сайте только за счет CSS.

3. transform:translate(x,y) - смещение объекта

Следующей командой, которую мы рассмотрим это команда для перемещения объекта translate(x,y) , где аргументы в скобках - смещение по оси Х и У соответственно.

Пример #4. Смещение объектов в html через трансформацию

На странице преобразуется в следующее

Такие эффекты зачастую используются. Ведь это дает возможность создавать анимацию без JavaScript. В данном случае квадрат перемещается мгновенно (без анимации).

Примечание

Если нужно применить преобразование только по одной из осей, то можно воспользоваться более частным случаем: translateX(x) - смещение по Х, translateY(y) - смещение У.

4. transform:scale(x,y) - масштабирование объекта

Команда для масштабирования объекта scale(x,y) , где аргументы в скобках - масштабирование по осям Х и У соответственно.

Пример #5. Масштабирование объектов в html

На странице преобразуется в следующее

При наведении квадрат становится больше по горизонтали на 50% (коэффициент 1.5), а по вертикали на 30% (коэффициент 1.3). Значение 1 означает отсутствие масштабирования. Все что меньше 1, будет означать уменьшение объекта.

Примечание

Если нужно применить преобразование только по одной из осей, то можно воспользоваться более частным случаем: scaleX(x) - масштабирование по Х, scaleY(y) - масштабирование по У.

5. transform:skew - наклон объекта

Команда для наклона объекта skew(x,y) , где аргументы в скобках - наклон по осям Х и У соответственно. Наклон необходимо указывать в градусах deg .

Пример #6. Наклон объектов в html

На странице преобразуется в следующее

При наведении квадрат трансформируется в ромб благодаря наклону.

Примечание

Если нужно применить преобразование только по одной из осей, то можно воспользоваться более частным случаем: skewX(x) - наклон по Х, skewY(y) - наклон по У.

6. Комбинирование значений transform

Настало время рассмотреть интересные эффекты, которые можно получить комбинируя вместе различные трансформации. Применим сразу три действия по изменения объекта масштабирование (scale ), вращение (rotate ) и перемещения (translate ).

Пример #7. Комбинирование значений transform

Исходное значение: квадрат с черной рамкой. При наведении на него он вращаясь превратится в круг с красной рамкой и изменит цвет.

На странице преобразуется в следующее

7. Другие значения transform

Мы рассмотрели самые основные значения transform . Рассмотрим остальные возможности.

• none - отсутствие преобразований (по умолчанию включено оно);
• matrix(x,x,x,x,x,x) - преобразование 2D с помощью матрицы из 6 значений;
• matrix3d(x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x) - преобразование 3D с помощью матрицы из 16 значений;
• translate3d(x,y,z) - перемещение 3d (по сравнению с обычным перемещением, здесь добавлена еще третья координата);
• scale3d(x,y,z) - масштабирование в 3d (по сравнению с обычным масштабированием, здесь добавлена еще третья координата);
• rotate3d(x,y,z) - вращение в 3d (по сравнению с обычным вращением, здесь добавлена еще третья координата);
• rotateX(x) - 3d вращение по оси X;
• rotateY(x) - 3d вращение по оси Y;
• rotateZ(x) - 3d вращение по оси Z;
• perspective(n) - перспектива для преобразования 3D элемента;

В JavaScript свойство CSS transform доступно по следующим свойствам:

object.style.transform="Трансформация" document.getElementById("elementID").style.transform = ""

Возможно, вы зададите вопрос "а зачем вообще использовать transform, когда можно просто изменять данные объекта как нам нужно. Например, изменив размеры объекта?" Разница в том, что свойств transform при трансформации никак не сдвигает другие элементы на странице. В случае же простого изменения размеров объекта это неминуемо приводит к сдвигу соседних объектов вокруг, что, как правило, некрасиво.

Модель визуального форматирования CSS описывает систему координат внутри каждого позиционированного элемента. Система координат является точкой отсчета для свойств смещения. Положение и размеры в этом координатном пространстве можно рассматривать как заданные в пикселях, относительно точки отсчета, с положительными значениями, идущими вправо и вниз. Это координатное пространство можно изменить с помощью свойства transform .

CSS3-трансформации позволяют сдвигать, поворачивать и масштабировать элементы. Трансформации преобразовывают элемент, не затрагивая остальные элементы веб-страницы, т.е. другие элементы не сдвигаются относительно него.

К элементам, которые могут быть трансформированы, относятся элементы с display: block; и display: inline-block; , а также элементы, значение свойства display которых вычисляется как table-row , table-row-group , table-header-group , table-footer-group , table-cell или table-caption . Трансформированным считается элемент с любым установленным значением свойства transform , отличным от none .

Существуют два вида CSS3-трансформаций – 2D и 3D . 2D-трансформации преобразовывают элементы в двумерном пространстве c помощью 2D-матрицы преобразований. Эта матрица применяется для вычисления новых координат объекта, на основе значений свойств transform и transform-origin . Преобразования влияют только на визуальный рендеринг. В отношении макета страницы они могут отразиться на переполнении содержимого блока. По умолчанию точка трансформации находится в центре элемента.

2D-трансформации элементов

Поддержка браузерами

IE: 10.0, 9.0 -ms-
Edge: 12.0
Firefox: 16.0, 3.5 -moz-
Chrome: 36.0, 4.0 -webkit-
Safari: 9.0, 3.1 -webkit-
Opera: 23.0, 15.0 -webkit-
iOS Safari: 9, 7.1 -webkit-
Android Browser: 53, 2.1 -webkit-
Chrome for Android: -webkit-

1. Функции 2D-трансформации transform

Свойство задаёт вид преобразования элемента. Свойство описывается с помощью функций трансформации , которые смещают элемент относительно его текущего положения на странице или изменяют его первоначальные размеры и форму. Не наследуется.

Допустимые значения:

matrix() — любое число
translate() , translateX() , translateY() — единицы длины (положительные и отрицательные), %
scale() , scaleX() , scaleY() — любое число
rotate() — угол (deg, grad, rad или turn)
skew() , skewX() , skewY() — угол (deg, grad, rad)

Функция	Описание
none	Значение по умолчанию, означает отсутствие трансформации. Также отменяет трансформацию для элемента из группы трансформируемых элементов.
matrix(a, c, b, d, x, y)	Смещает элементы и задает способ их трансформации, позволяя объединить несколько функций 2D-трансформаций в одной. В качестве трансформации допустимы поворот, масштабирование, наклон и изменение положения. Значение a изменяет масштаб по горизонтали. Значение от 0 до 1 уменьшает элемент, больше 1 — увеличивает. Значение c деформирует (сдвигает) стороны элемента по оси Y, положительное значение — вверх, отрицательное — вниз. Значение b деформирует (сдвигает) стороны элемента по оси X, положительное значение — влево, отрицательное — вправо. Значение d изменяет масштаб по вертикали. Значение меньше 1 уменьшает элемент, больше 1 — увеличивает. Значение x смещает элемент по оси X, положительное — вправо, отрицательное — влево. Значение y смещает элемент по оси Y, положительное значение — вниз, отрицательное — вверх.
translate(x,y)	Сдвигает элемент на новое место, перемещая относительно обычного положения вправо и вниз, используя координаты X и Y, не затрагивая при этом соседние элементы. Если нужно сдвинуть элемент влево или вверх, то нужно использовать отрицательные значения.
translateX(n)	Сдвигает элемент относительно его обычного положения по оси X.
translateY(n)	Сдвигает элемент относительно его обычного положения по оси Y.
scale(x,y)	Масштабирует элементы, делая их больше или меньше. Значения от 0 до 1 уменьшают элемент. Первое значение масштабирует элемент по ширине, второе — по высоте. Отрицательные значения отображают элемент зеркально.
scaleX(n)	Функция масштабирует элемент по ширине, делая его шире или уже. Если значение больше единицы, элемент становится шире, если значение находится между единицей и нулем, элемент становится уже. Отрицательные значения отображают элемент зеркально по горизонтали.
scaleY(n)	Функция масштабирует элемент по высоте, делая его выше или ниже. Если значение больше единицы, элемент становится выше, если значение находится между единицей и нулем — ниже. Отрицательные значения отображают элемент зеркально по вертикали.
rotate(угол)	Поворачивает элементы на заданное количество градусов, отрицательные значения от -1deg до -360deg поворачивают элемент против часовой стрелки, положительные — по часовой стрелке. Значение rotate(720deg) поворачивает элемент на два полных оборота.
skew(x-угол,y-угол)	Используется для деформирования (искажения) сторон элемента относительно координатных осей. Если указано одно значение, второе будет определено браузером автоматически.
skewX(угол)	Деформирует стороны элемента относительно оси X.
skewY(угол)	Деформирует стороны элемента относительно оси Y.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

Div { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }

Наведите курсор мыши на блоки, чтобы посмотреть функции трансформации в действии.

2. Точка трансформации transform-origin

Свойство позволяет сместить центр трансформации, относительно которого происходит изменение положения/размера/формы элемента. Значение по умолчанию — center , или 50% 50% . Задаётся только для трансформированных элементов. Не наследуется.