CSS Animasyon Örnekleri

CSS Animasyon Örnekleri

Tarhi : 15-04-2020 12:10:53 | Yazar : ÇAĞLAR BOSTANCI
Özellik Açıklaması
bakcface-visibility:visible; Oluşturulan nesnelerin arka yüzlerininde görünmesi için kullanılır. Visible ise görünmesini sağlar.
bakcface-visibility:visible Oluşturulan nesnelerin arka yüzlerininde görünmesi için kullanılır. Hidden ise gizlenmesini sağlar.
perspective Nesnelere z boyutunu yani üçüncü boyut (derinlik algısı) efektini verir. Aldığı değerler 20%, 1000px ve none(Görünmemesini sağlar)
prespective-origin: 20% 30%; Nesnenin konumunu belirlemek için kullanılır. Aldığı değerler 1%, 1px, left, right, top, bottom
transform-style: preserve-3d Nesnenin 2D veya 3D durumunu belirlemek için kullanılır. Aldığı değerler flat(2D yatay düzlem)
tranform: translate(100px,100px); Nesnenin x (yatay) ve y(Dikey) düzlemde konum değişimini sağlar. 2D Olarak yapar.
transform:translate3d(x,y,z); Nesnenin x (Yatay), y(Dikey), ve z(Derinlik) olarak konum değişimini sağlar.
div.nesne{
transform-style: preserve-3d;
transform-origin:50% 50%;
backface-visibility:visible;
transform: perspective(1000px),translate3d(200px, 100px, 100px);
}
transform:translateX(45px) x( yatay) düzleminde konumunu değiştirir. Pozitif ve negatif değerler alabilir.
div.nesne{
transform-style: preserve-3d;
transform-origin:50% 50%;
backface-visibility:visible;
transform: perspective(1000px),translateX(100px);
}
transform:translateY(45px) Y( dikey) düzleminde konumunu değiştirir. Pozitif ve negatif değerler alabilir.
div.nesne{
transform-style: preserve-3d;
transform-origin:50% 50%;
backface-visibility:visible;
transform: perspective(1000px),translateY(200px);
}
transform:translateZ(45px) Z( derinlik) düzleminde konumunu değiştirir. Pozitif ve negatif değerler alabilir.
div.nesne{
transform-style: preserve-3d;
transform-origin:50% 50%;
backface-visibility:visible;
transform: perspective(1000px),translateZ(200px);
}
transform:scale(2,2) Nesnenin boyutunda x (yatay) ve y(dikey) düzlemde boyutunu değiştirmeye yarar.
transform:scale3d(2,2,2) Nesnenin boyutunda x (yatay) ,y(dikey) ve z(derinlik) düzlemde boyutunu değiştirmeye yarar.
div.nesne{
transform-style: preserve-3d;
transform-origin:50% 50%;
backface-visibility:visible;
transform: perspective(1000px),scale3d(2,2,2);
}
transform:scaleX(2) Nesnenin boyutunda x (yatay) düzlemde boyutunu değiştirmeye yarar.
div.nesne{
transform-style: preserve-3d;
transform-origin:50% 50%;
backface-visibility:visible;
transform: perspective(1000px),scaleX(2);
}
transform:scaleY(2) Nesnenin boyutunda y(dikey) düzlemde boyutunu değiştirmeye yarar.
div.nesne{
transform-style: preserve-3d;
transform-origin:50% 50%;
backface-visibility:visible;
transform: perspective(1000px),scaleY(2);
}
transform:scaleZ(2) Nesnenin boyutunda z(derinlik) düzleminde boyutunu değiştirmeye yarar.
div.nesne{
transform-style: preserve-3d;
transform-origin:50% 50%;
backface-visibility:visible;
transform: perspective(1000px),scaleZ(2);
}
transform:rotate(45deg); Nesneyi x,y düzleminde döndermeye yarar.
transform:rotate(45deg); Nesneyi x,y düzleminde döndermeye yarar.
transform:rotateX(45deg); Nesneyi x düzleminde döndermeye yarar.
div.nesne{
transform-style:preserve-3d;
transform:perspective(500px), rotateX(45deg)
}
transform:rotateY(45deg); Nesneyi y düzleminde döndermeye yarar.
div.nesne{
transform-style:preserve-3d;
transform:perspective(500px), rotateY(45deg)
}
transform:rotateZ(45deg); Nesneyi z düzleminde döndermeye yarar.
div.nesne{
transform-style:preserve-3d;
transform:perspective(500px), rotateZ(45deg)
}
transform:rotate3d(1,1,1,45deg); Nesneyi x,y,z düzlemlerinde aynı anda döndermeye yarar.
div.nesne{
backface-visibility:visible; transform-origin:50% 50%; transform-style:preserve-3d;
transform:perspective(500px), rotateX3d(1,1,1,45deg)
}
transform:skew(45deg,45deg) Nesneyi x ve y düzleminde eğmeye yarar.
transform:skewX(45deg) Nesneyi x düzleminde eğmeye yarar.
transform:skeY(45deg) Nesneyi y düzleminde eğmeye yarar.

Örnek Uygulama

Reklam Alanı