CSS3 3D Dönüşümler
CSS3 3D dönüşümleri kullanarak öğeleri biçimlendirmek için izin verir.
Fare 2D ve 3D dönüşümü arasındaki farkı görmek için aşağıdaki unsurları üzerinde:
2B döndürmek
3D döndürme
3D Dönüşümü için Tarayıcı Desteği
Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.
Sayılar ardından -webkit-, -moz- veya -o- bir önek ile çalıştığım ilk versiyonunu belirtin.
| özellik | |||||
|---|---|---|---|---|---|
| transform | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| transform-origin (three-value syntax) |
36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| transform-style | 36.0 12.0 -webkit- |
11.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| perspective | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| perspective-origin | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| backface-visibility | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
CSS3 3D Dönüşümler
Bu bölümde aşağıdaki 3B dönüştürme yöntemleri hakkında öğreneceksiniz:
-
rotateX() -
rotateY() -
rotateZ()
rotateX() Yöntem
rotateX() yöntemi, belirli bir derecede kendi X-ekseni etrafında bir eleman döner:
Örnek
div
{
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg);
}
Kendin dene " rotateY() Yöntem
rotateY() yöntemi, belirli bir derecede kendi Y ekseni etrafında bir eleman döner:
Örnek
div
{
-webkit-transform: rotateY(130deg); /* Safari */
transform: rotateY(130deg);
}
Kendin dene " rotateZ() Yöntem
rotateZ() yöntemi, belirli bir derecede kendi Z ekseni etrafında bir eleman döner:
Örnek
div
{
-webkit-transform: rotateZ(90deg); /* Safari */
transform: rotateZ(90deg);
}
Kendin dene " Egzersizleri ile Yourself test edin!
Egzersiz 1 » Alıştırma 2» Egzersiz 3 »
Özellikler 'Transform CSS3
Aşağıdaki tabloda tüm 3D dönüşüm özelliklerini:
| özellik | Açıklama |
|---|---|
| transform | Bir elemanın bir 2D veya 3D dönüşümü uygular |
| transform-origin | Eğer dönüştürülmüş unsurları konumunu değiştirmesine izin verir |
| transform-style | nasıl iç içe unsurlar 3D alanında oluşturulur belirtir |
| perspective | nasıl görüntüleneceğini 3D elemanları üzerinde perspektif belirtir |
| perspective-origin | 3D öğelerin alt konumunu belirtir |
| backface-visibility | ekrana bakan zaman bir eleman görünür olup olmayacağı tanımlar |
Yöntemleri Transform 3D
| fonksiyon | Açıklama |
|---|---|
| matrix3d ( n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n ) | 16 değerleri bir 4x4 matris kullanılarak, 3 boyutlu bir dönüşüm tanımlar |
| translate3d( x,y,z ) | 3D çevirisini tanımlar |
| translateX( x ) | X ekseni için sadece değeri kullanılarak, 3D çevirisini tanımlar |
| translateY( y ) | Y ekseni için sadece değeri kullanılarak, bir 3 boyutlu çeviri tanımlar |
| translateZ( z ) | Z ekseni için sadece değeri kullanılarak, 3D çevirisini tanımlar |
| scale3d( x,y,z ) | 3D ölçek dönüşümünü tanımlar |
| scaleX( x ) | X-ekseni için bir değer verilerek 3B ölçekli bir dönüşüm tanımlar |
| scaleY( y ) | Y ekseni için bir değer verilerek 3B ölçekli bir dönüşüm tanımlar |
| scaleZ( z ) | Z ekseni için bir değer verilerek 3B ölçekli bir dönüşüm tanımlar |
| rotate3d( x,y,z,angle ) | 3D döndürme tanımlar |
| rotateX( angle ) | X ekseni boyunca bir 3D dönüş tanımlar |
| rotateY( angle ) | Y ekseni boyunca bir 3D dönüş tanımlar |
| rotateZ( angle ) | Z ekseni boyunca bir 3D dönüş tanımlar |
| perspective( n ) | 3D dönüştürülmüş elemanı için bir perspektif görünümünü tanımlar |