• Aktar

Merhaba sevgili habradrug! İnternette CSS3'te birçok büyük dönüşüm ve geçiş örneği var. Bu makalede, CSS3 temellerinin temellerini inceleyeceğiz ve buna benzer bir şeyin nasıl oluşturulacağını öğreneceğiz. Bu eğitim, CSS3'ü 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önde yönlendirilmiştir. Neden? Gerçek şu ki, HTML ve CSS (örneğin ActionScript ile birlikte) ters koordinat sistemini kullanır, çünkü web sayfası sol üst köşeden başlar ve aşağı iner.
Not: HTML ve CSS'nin yapısına zaten aşina olduğunuzu varsayacağız. CSS dosyasının nasıl kurulacağı, resimlerin nasıl yerleştirileceği vb. İle ilgili 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ünde HTML ve CSS" (ücretsiz ve İngilizce) kursuna göz atmanızı tavsiye ederiz.

1: Yatay hareket

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

Sağa hareket

Kullanacağımız nesneyi taşımak için dönüştürme: translate (x, y)burada X pozitif bir sayıdır ve Y \u003d 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.
• sağa hareket: Bu sınıfı kullanarak nesnemizi hareket ettireceğiz.

CSS
İlk önce nesnemizi (kamyon resmi) merkeze yerleştireceğiz.
.object (konum: mutlak;) .van (üst:% 45; sol:% 44;)
Bu örnekte, nesneyi 350px sağa sürükleyeceğiz. Sözdizimi kullanıldı dönüştürme: translate (350px, 0);... Ek olarak, nesne yalnızca üzerine geldiğinizde hareket edecektir: #axis: fareyle üzerine gelin .move-right.

#axis: hover .move-right (transform: translate (350px, 0); -webkit-transform: translate (350px, 0); / ** Chrome ve Safari ** / -o-transform: translate (350px, 0) ; / ** Opera ** / -moz-transform: translate (350px, 0); / ** Firefox ** /)
Parametre dönüştürmek nesneyi yalnızca bir noktadan diğerine hareket ettirecek, ancak bu hareketin bir animasyonunu oluşturmayacaktır. Bunu düzeltmek için, .object sınıfına bir hareket parametresi eklemeniz gerekir.

Nesne (konum: mutlak; geçiş: tüm 2'ler kolay giriş; -webkit geçişi: tüm 2'ler kolay giriş; / ** Chrome ve Safari ** / -moz geçiş: tüm 2'ler kolay giriş ; / ** Firefox ** / -o-geçiş: tüm 2s kolay giriş; / ** Opera ** /)
Bu taşıma kuralı, tarayıcıya animasyon uygulamasını söyleyecektir. herşey nesne parametreleri 2 saniye (gecikme yok) işlevi kullanarak kolay giriş.
6 farklı hareket zamanlama işlevi 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 yavaş başlar.
• rahatlama: Hareket etmek yavaş biter.
• kolaylık: Hareket yavaş başlar ve biter.
• kübik bezier: yer değiştirme değerinin manuel tanımı.

Sola hareket

Bir nesneyi sola taşımak için, eksene negatif bir değer koymanız yeterlidir. OH, süre Y değişmeden kalır. Bizim durumumuzda, nesneyi şuraya taşıyacağız - 350px 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 taşımak için.

CSS
Şimdi OX ekseni için -350px girelim. dönüştürme: translate (-350px, 0); - nesneyi sola hareket ettirin.
#axis: hover .move-left (transform: translate (-350px, 0); -webkit-transform: translate (-350px, 0); / ** Safari ve Chrome ** / -o-transform: translate (-350px , 0); / ** Opera ** / -moz-transform: translate (-350px, 0); / ** Firefox ** /)
Hareket kurallarını daha önce 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 yukarı hareket etmek ve değer vermek y aşağı taşımak için.

Harekete geçmek

Html
HTML şablonu, önceki örneklerle aynıdır. Bununla birlikte, nesnemizi bir roketle değiştireceğiz (netlik için) ve hareket sınıfını atayacağız.

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

#axis: hover .move-up (transform: translate (0, -350px); -webkit-transform: translate (0, -350px); -o-transform: translate (0, -350px); -moz-transform: çevir (0, -350px);)

Aşağı hareket

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

Html

CSS
#axis: hover .move-down (transform: translate (0.350px); -webkit-transform: translate (0.350px); -o-transform: translate (0.350px); -moz-transform: translate (0.350px); )

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ürme: translate (x, y). Yöne bağlı olarak değer x ve y olumlu veya olumsuz olabilir.

Html

CSS
#axis: hover .move-ne (transform: translate (350px, -350px); -webkit-transform: translate (350px, -350px); -o-transform: translate (350px, -350px); -moz-transform: çevir (350px, -350px);)

4: Döndürme

CSS3'te dönüş, derece koordinatlarıyla kontrol edilir (0 ° - 360 ° arası). Bir nesneyi döndürmek için aşağıdaki seçenekleri uygulayın: dönüştürme: döndürme (ndeg); 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ürme (ndeg).

Html

CSS
#axis: hover .rotate360cw (transform: rotate (360deg); -webkit-transform: rotate (360deg); -o-transform: rotate (360deg); -moz-transform: rotate (360deg);)

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ürme (ndeg).

Html

CSS
#axis: hover .rotate360ccw (transform: rotate (-360deg); -webkit-transform: rotate (-360deg); -o-transform: rotate (-360deg); -moz-transform: rotate (-360deg);)

5: Ölçeklendirme

Ö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 n / x, y değerine göre yeniden boyutlandırılacaktır; burada X ekseni genişlik ve Y yüksekliktir.
Aşağıdaki örneğe bir göz atalım.

Bazen alışılmadık tasarım çözümleri, düzen tasarımcısını metni yerleştirirken aynı standart dışı çözümlere başvurmaya zorlar. Örneğin, metin öğelerinden birini belirli bir açıyla döndürün. Bu makale, bu soruna birkaç basit çözüme bakacaktır.

Metni bir resimle değiştirmek

Bu sorunun en ilkel çözümü bir resim kullanmak olacaktır. Tanınmış Adobe Photoshop programı sayesinde metin kolaylıkla herhangi bir açıya döndürülebilir. Tahmin edebileceğiniz gibi, bu yöntemi kullanmak çok fazla akıl gerektirmiyor.

Bazı durumlarda başka bir yöntem kullanmak imkansızdır, ancak çoğu durumda resim kullanmaktan uzaklaşırlar. Bu, bu tekniğe eşlik eden bir dizi dezavantajdan kaynaklanmaktadır:

• Kullanıcının belirtilen kapsayıcıdaki bilgileri kopyalayamaması;
• Öğenin metin kısmında düzeltme yapma prosedürünün karmaşıklığı;
• Site sunucusundaki trafik artıyor;
• Kaynak güncellenirken sunucuya yapılan isteklerin büyümesi.

Bir resmi kullanmanın pek çok olumsuz yönü olmasına rağmen, yöntemin birkaç olumlu etkisi vardır.

• Tarayıcılar arası uyumluluk - farklı tarayıcılarda görüntülemede sorun yok.
• Görüntü konumlandırmada yüksek yetenek.

Yine de bu durumda olumsuz yönler ağır basmaktadır. Başka çözümlere dönmenizi tavsiye ederim.

CSS dönüştürme özelliğini kullanma

Bu yöntemin kullanımı görüntüye göre çok daha fazladır. Önemli bir fark, metin düzenlemedeki esneklik ve döndürülmüş bir kabın içeriğini seçme ve kopyalama yeteneğidir. Bu tekniğin geliştirilmesindeki ana engel, tarayıcılar arası uyumluluktu. Bu cephede şimdi oldukça iyiye gittik, bu da dönüştürme özelliğini uygulamayı kolaylaştırıyor.

Özelliğin özü, düzlemi derecelere göre bölmektir. Sonuç olarak, belirli bir açı belirlenirken, kap karşılık gelen pozisyonu alacaktır. Saf özelliğin geçerli olmadığı unutulmamalıdır. Aslında, yüksek bir tarayıcılar arası uyumluluk sağlayan satıcı özellikleri eşlik etmelidir.

Konumu değiştirenin blok içindeki metin değil, özelliğin sınıf seçici aracılığıyla veya başka bir şekilde adreslendiği bloğun kendisi olduğuna dikkat etmek önemlidir. Aşağıda, yöntemi kullanmanın bir örneği verilmiştir.

Conteiner (- moz- dönüşümü: döndürme (- 45deg); - webkit- dönüşümü: döndürme (- 45deg); - o- dönüşümü: döndürme (- 45deg); - ms- dönüşümü: döndürme (- 45deg); dönüşümü: döndürme ( - 45 derece);)

Sonuç olarak, yaklaşık olarak aşağıdaki resmi elde ederiz:

Bu özelliğe dönersem, tasarım Firefox, Opera, Internet Explower ve diğer webkit tarayıcılarında sorunsuz bir şekilde görüntülenecektir.

Javascript üzerinden iletişim

Sürecin özü, bu yöntemden önce tartışılana tamamen benzer. Bunu uygulamak için minimum js-kodu, matematik bilgisine ve Matrix filtresini anlamaya ihtiyacınız var.

Javascript

var deg2radians \u003d Matematik. PI * 2/360, derece \u003d - 4; rad \u003d deg * deg2radians, costheta \u003d Math. cos (rad), sintheta \u003d Matematik. günah (rad); jQuery (". rotatedBlock"). css ((filtre: "progid: DXImageTransform.Microsoft.Matrix (M11 \u003d"+ kostheta + ", M12 \u003d" + (- 1) * sintheta + ", M21 \u003d" + sintheta + ", M22 \u003d" + kostheta + ", SizingMethod \u003d" otomatik genişletme ", etkinleştirildi \u003d true)"} ) ;

Sonuç olarak, tarayıcıda transform özelliğini kullanırken olduğu gibi aynı resmi elde ederiz.

Bu girişteki bir sembolü anlamasanız bile, önemli değil. Bu kodla çalışmak için, açının değerinin ikinci satıra yazıldığını anlamak yeterlidir, onu kendiniz yerine koyarsınız, geri kalanı - sadece değişiklik yapmadan kopyalayın.

Javascript ve CSS kullanmanın özellikleri

Bu iki yöntemin çalışma prensibinde birkaç küçük farklılığı vardır, bu da bilmek ve hesaba katmak çok önemlidir.

İlk fark, blok yüksekliği ve konumu arasındaki farka bağlıdır. Durumdan çıkış yolu oldukça basittir ve margin özelliğini kullanmaktan ibarettir. Girinti yaparak bloğu istenen seviyeye ve konuma maruz bırakıyoruz. Diğer konumlandırma tutarsızlıkları, aynı zamanda etkili bir şekilde çalışan bloğa mutlak bir konumlandırma değeri atanarak çözülebilir.

Daha karmaşık ve bireysel bir yaklaşım, transform-origin özelliğinin kullanımına dayanır. Bu tekniğin özü sonraki makalelerde anlatılacaktır.

Bir sonraki fark, dönüşün özünde yatmaktadır. JS kodunu kullanırken, pivot noktası bloğun kenarındadır. İkinci yöntemde bu nokta elemanın merkezinde yer almaktadır. Anlama kolaylığı için aşağıdaki resme bakın.

CSS görsel biçimlendirme modeli, her konumlandırılmış öğenin içindeki koordinat sistemini açıklar. Koordinat sistemi, ofset özellikleri için referans noktasıdır. Bu koordinat uzayındaki konum ve boyutlar, orijine göre piksel cinsinden verildiği gibi düşünülebilir, pozitif değerler sağa ve aşağıya gider. Bu koordinat alanı, transform özelliği kullanılarak değiştirilebilir.

CSS3 dönüşümleri öğeleri taşımanıza, döndürmenize ve ölçeklemenize izin verir. Dönüşümler, web sayfasının diğer öğelerini etkilemeden bir öğeyi dönüştürür, örn. diğer öğeler ona göre hareket etmez.

Dönüştürülebilen öğeler arasında display: block; ve ekran: satır içi blok; ayrıca görüntüleme özelliği değeri tablo satırı, tablo satırı grubu, tablo başlığı grubu, tablo altbilgisi grubu, tablo hücresi veya tablo başlığı olarak hesaplanan öğeler. Hiçbiri dışında dönüştürme özelliğinin herhangi bir ayar değerine sahip bir öğenin dönüştürülmüş olduğu kabul edilir.

İki tür CSS3 dönüşümü vardır - 2D ve 3 boyutlu. 2D dönüşümler 2D dönüştürme matrisi kullanarak öğeleri iki boyutlu uzayda dönüştürün Bu matris, transform ve transform-origin özelliklerinin değerlerine dayalı olarak nesnenin yeni koordinatlarını hesaplamak için kullanılır. Dönüşümler yalnızca görsel oluşturmayı etkiler. Sayfa düzeni ile ilgili olarak, blok içerik taşmasına neden olabilirler. Varsayılan olarak, dönüştürme noktası öğenin merkezindedir.

2D Eleman Dönüşümleri

Tarayıcı desteği

IE: 10,0, 9,0-ms-
Kenar: 12.0
Firefox: 16.0, 3.5 -moz-
Krom: 36.0, 4.0 -webkit-
Safari: 9.0, 3.1 -webkit-
Opera: 23.0, 15.0 -webkit-
iOS Safari: 9, 7.1 -webkit-
Android Tarayıcı: 53, 2.1 -webkit-
Android için Chrome: -webkit-

1. 2D dönüştürme işlevleri

Özellik, öğenin dönüştürme türünü ayarlar. Özellik kullanılarak açıklanmıştır dönüşüm fonksiyonlarıöğeyi sayfadaki mevcut konumundan kaydıran veya orijinal boyutunu ve şeklini değiştiren. Miras alınmamıştır.

Geçerli değerler:

matrix () - herhangi bir sayı
translate (), translateX (), translateY () - uzunluk birimleri (pozitif ve negatif),%
scale (), scaleX (), scaleY () - herhangi bir sayı
rotate () - açı (derece, derece, rad veya dönüş)
skew (), skewX (), skewY () - açı (deg, grad, rad)

Fonksiyon	Açıklama
Yok	Varsayılan değer, dönüşüm olmadığı anlamına gelir. Ayrıca, dönüştürülebilir öğeler grubundaki bir öğenin dönüşümünü de iptal eder.
matris (a, c, b, d, x, y)	Öğeleri ofsetler ve nasıl dönüştürüleceğini ayarlayarak birden fazla 2B dönüştürme işlevini tek bir işlevde birleştirmenize olanak tanır. Döndürme, ölçekleme, eğme ve yeniden konumlandırmaya dönüştürme olarak izin verilir. A değeri yatay ölçeği değiştirir. 0'dan 1'e kadar bir değer elemanı azaltır, 1'den fazla artırır. C değeri, elemanın kenarlarını y ekseni boyunca deforme eder (kaydırır), pozitif değer - yukarı, negatif - aşağı. B değeri, elemanın yanlarını x ekseni boyunca, pozitif değerler sola, negatif değerler sağa doğru deforme eder (kaydırır). D değeri dikey ölçeği değiştirir. 1'den küçük bir değer öğeyi azaltır, 1'den fazla ise artırır. X değeri, öğeyi x ekseni boyunca pozitif sağa, negatif sola kaydırır. Y değeri, öğeyi y ekseni boyunca, pozitif değeri aşağı, negatif değeri yukarı doğru kaydırır.
çevir (x, y)	Bir öğeyi, bitişik öğeleri etkilemeden, X ve Y koordinatlarını kullanarak normal konumuna göre sağa ve aşağı hareket ettirerek yeni bir konuma kaydırır. Bir öğeyi sola veya yukarı taşımanız gerekiyorsa, o zaman negatif değerler kullanmanız gerekir.
çeviriX (n)	Öğeyi normal X konumundan kaydırır.
translateY (n)	Öğeyi normal y konumundan kaydırır.
ölçek (x, y)	Öğeleri büyütmek veya küçültmek için ölçeklendirir. 0 ile 1 arasındaki değerler öğeyi azaltır. İlk değer, öğeyi genişliğe, ikincisi yüksekliğe ölçeklendirir. Negatif değerler, öğeyi yansıtır.
ölçekX (n)	İşlev, öğeyi genişliğe ölçeklendirerek onu daha geniş veya daha dar hale getirir. Değer birden büyükse öğe genişler, değer bir ile sıfır arasındaysa öğe daralır. Negatif değerler, öğeyi yatay olarak çevirir.
ölçekY (n)	İşlev, öğeyi yüksekliğe göre ölçeklendirerek daha yüksek veya daha alçak yapar. Değer birden büyükse öğe yükselir, değer bir ile sıfır arasındaysa daha düşük olur. Negatif değerler, öğeyi dikey olarak çevirir.
döndür (açı)	Öğeleri belirtilen derece sayısına göre döndürür; -1 dereceden -360 dereceye kadar olan negatif değerler, öğeyi saat yönünün tersine, pozitif değerler saat yönünde döndürür. Döndürme değeri (720deg), öğeyi iki tam tur döndürür.
çarpıklık (x açısı, y açısı)	Koordinat eksenlerine göre bir elemanın kenarlarını deforme etmek (deforme etmek) için kullanılır. Bir değer belirtilirse, ikincisi tarayıcı tarafından otomatik olarak algılanacaktır.
skewX (açı)	X ekseni etrafında bir elemanın kenarlarını deforme eder.
skewY (açı)	Y ekseni etrafında bir elemanın kenarlarını deforme eder.
ilk	Özellik değerini varsayılan değerine ayarlar.
miras almak	Özellik değerini üst öğeden devralır.

Sözdizimi

Div (-webkit-dönüşümü: döndürme (360deg); -ms-dönüşümü: döndürme (360deg); dönüştürme: döndürme (360deg);)

Dönüşüm işlevlerini çalışırken görmek için farenizi blokların üzerine getirin.

2. Dönüşüm noktası dönüşümü-başlangıç

Özellik, öğenin konumunun / boyutunun / şeklinin değiştiği yere göre dönüştürme merkezini kaydırmanıza izin verir. Varsayılan, merkez veya% 50% 50'dir. Yalnızca dönüştürülmüş öğeler için ayarlayın. Miras alınmamıştır.

2.
2.

CSS 3 ile bir öğeyi döndürme

Zaman zaman web tasarımcıları bir öğeyi döndürme sorunu ile 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 şunun için örnek bir kod verilmiştir: bir elemanın 90 derece döndürülmesi.

CSS kodu

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



dönüşümü: döndür (90deg);
}

CSS 3 ile Metni Hizalama ve Yönetme

Şimdi mülk hakkında daha fazla bilgi yazma modu... Öğenin metninin hizalamasını (sol - sağ) ve en ilginci yönü (yatay veya dikey) ayarlamanıza olanak tanır! Bakar ve deneriz:

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 yukarı 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 yukarı ve sola hizalanır.
bt-lr metin dikey olarak yönlendirilir ve aşağıya ve sola hizalanır.
İfadeyi örnek olarak kullanmak metin buraya gelecek CSS özelliklerinin etkisini düşünebilirsiniz

CSS kodu

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

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

Metni 90 derece döndürmek ve CSS 3 metnini hizalamak için örnek

İşte tam bir örnek. Metni 90 derece döndürün. Bunu yapmak için rotateText tanımlayıcısıyla bir blok oluşturun ve buna CSS özelliklerini ayarlayın.

HTML ve CSS kodu

Misal CSS ile bir öğeyi 90 derece döndürmek aşağıdaki bağlantıdan görüntülenebilir.

Çeviri: Vlad Merzhevich

CSS3 dönüştürme özelliği kullanılarak herhangi bir öğeyi ölçeklemek, eğriltmek ve döndürmek mümkündür. Tüm modern tarayıcılar (öneklerle) tarafından desteklenir ve incelikle indirilebilir, örneğin:

#myelement (-webkit-dönüşümü: döndürme (30deg); -moz-dönüşümü: döndürme (30deg); -ms-dönüşümü: döndürme (30deg); -o-dönüşümü: döndürme (30deg); dönüşümü: döndürme (30deg); )

İyi bir şey. Bununla birlikte, tüm öğe döner - içeriği, kenarlıkları ve arka plan görüntüsü. Ya sadece arka plan resmini döndürmek istiyorsanız? Ya da arka planın yerinde kalması ve öğenin dönmesi için mi?

W3C'nin şu anda arka plan resmini dönüştürmek için bir önerisi yok. İnanılmaz derecede faydalı olurdu, bu yüzden sonunda bir şeyin ortaya çıkacağından şüpheleniyorum, ancak bugün benzer efektleri kullanmak isteyen geliştiricilere yardımcı olmayacak.

Neyse ki bir çözüm var. Esasen, ana kapsayıcıya değil: önce veya: sonra sözde öğeye bir arka plan görüntüsü ekleyen bir saldırıdır. Sözde eleman bağımsız olarak dönüşebilir.

Yalnızca arka planı dönüştür

Kapta herhangi bir stil olmayabilir, ancak sözde öğemiz içeride konumlandırıldığı için konum: göreli olması gerekir. Ayrıca taşma: gizli olarak ayarlayın, aksi takdirde arka plan kabın dışına akacaktır.

# myelement (konum: göreli; taşma: gizli;)

Artık, dönüştürülebilir bir arka plana sahip, kesinlikle konumlandırılmış bir sözde öğe oluşturabiliriz. Z-endeksi özelliği -1 olarak ayarlanmıştır, bu arka planın kapsayıcı içeriğinin altında görünmesini sağlar.

# myelement: önce (içerik: ""; konum: mutlak; genişlik:% 200; yükseklik:% 200; üst:% -50; sol:% -50; z-endeksi: -1; arka plan: url (arka plan.png ) 0 0 tekrar; -webkit-dönüşümü: döndürme (30deg); -moz-dönüşümü: döndürme (30deg); -ms-dönüşümü: döndürme (30deg); -o-dönüştürme: döndürme (30deg); dönüşümü: döndürme (30deg );)

Sözde öğenin genişliğini, yüksekliğini ve konumunu ayarlamanız gerekebileceğini unutmayın. Örneğin, yinelenen bir görüntü kullanıyorsanız, arka plana tam olarak sığması için pivot alanı kabın kendisinden daha büyük olmalıdır.

Dönüştürülebilir öğelerin arka planını düzeltme

Üst kaptaki herhangi bir dönüşüm sözde elemanlar için de geçerlidir. Bu nedenle dönüşümü geri almamız gerekiyor, örneğin, kap 30 derece döndürülmüşse, arka plan sabit bir konumda olması için -30 derece dönmelidir:

#myelement (konum: göreli; taşma: gizli; -webkit-dönüşümü: döndür (30deg); -moz-dönüşümü: döndür (30deg); -ms-dönüşümü: döndürme (30deg); -o-dönüştürme: döndürme (30deg) ; dönüştürme: döndürme (30deg);) # myelement: önce (içerik: ""; konum: mutlak; genişlik:% 200; yükseklik:% 200; üst:% -50; sol:% -50; z-endeksi: - 1; arkaplan: url (background.png) 0 0 tekrar; -webkit-dönüşümü: döndürme (-30deg); -moz-dönüşümü: döndürme (-30deg); -ms-dönüşümü: döndürme (-30deg); -o- dönüştürme: döndürme (-30deg); dönüştürme: döndürme (-30deg);)

Yine, boyutu ve konumu, arka planın ana konteynere yeterince uyması için ayarlamanız gerekir.

Lütfen bir örnek için. Kodun tamamı HTML içinde saklanır.

Efekt IE9, Firefox, Chrome, Safari ve Opera'da çalışır. IE8 herhangi bir dönüşüm göstermeyecek, ancak arka plan görünecektir.

IE6 ve 7 sözde öğeleri desteklemez, bu nedenle arka plan kaybolur. Ancak, bu tarayıcıları desteklemek istiyorsanız, kapsayıcıya bir arka plan görüntüsü ekleyebilir ve ardından modern seçicileri veya koşullu yorumları kullanarak bunu hiçbiri olarak ayarlayabilirsiniz.