LARAVEL
SASS
| Ö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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS 3D ANIMATION</title> <style> div.genelDiv{ width: 20vw; /* Kapsayan div'e genişlik verdik */ height: auto; /* Yükseklik verdik. */ background:darkred; /* Arka plan rengi verdik.*/ perspective:600px; /* 3d Derinslik alığısı oluşturduk.*/ -webkit-perpective:600px; /* chrome için yazdıkç*/ position: absolute; /* Nesnenin pozisyon değerini x ve y düzleminde vermek için poszisyon tipini bilirledik. */ top:10vh; /* Yukarıdan konumunu verdik. */ left:calc((100vw - 20vw)/2) /* Tam ortalamsı için calc ile matematiksel işlem yaptık. Direk 40vw verilebilirdi.*/ } @keyframes effect-1{ 0%{ transform: rotateY(15deg); -webkit-transform: rotateY(45deg);} /* Animasyon başlangıç değeri */ 100%{transform: rotateY(15deg); -webkit-transform: rotateY(359deg)} /* Animasyon bitiş değeri*/ } div.genelDiv img{ width:100%; /* Resmin kapsayan dive genişliğini eşitledik. */ height:100%; /* Resmin dikeyde kapsayan dive yüksekliğini eşitledik */ transform: rotateY(15deg); /* ilk görünümdeki perspective eğimini verdik */ -webkit-transform: rotateY(15deg); /* chrome için tanımladık. */ } div.genelDiv:hover img{ animation:effect-1 1s ease; /* oluşturmuş olduğumuz animasyonu tanımladık ve anaDiv'e hover olduğunda resimin dönmesini istedik*/ } </style> </head> <div class="genelDiv"> <img src="https://caglarbostanci.com.tr/wp-content/uploads/2018/02/caglarbostanci-com-tr-profil.jpg" /> </div> <body> </body> </html> |