CSS3 ‘te Nesneyi Döndürme, Büyütme & Eğim Verme İşlemleri

Merhaba arkadaşlar,

Bu makalede sizlere CSS3 yardımı ile bir kutunun ” :hover ” özellikleri ile oynayarak döndürme, büyütme, eğim verme gibi işlemlerin nasıl yapılacağını anlatmaya çalışacağım. Bu makale sonuna geldiğimizde yaptığımız işlemlere bakınca oluşturduğunuz tasarımların menü bölümlerinde, dikkat çekmek için bir yere konumlandırılmış kutuların üzerinde veya tüm tasarımı kapsayan kutularda ilgi çekici küçük işlemler yapabileceğinizi görebileceksiniz.

Uygulamamıza başlayacak olursak ilk işlem olarak iki adet sayfa oluşturmamız gerekecek. Sayfa isimlerini ” index.html ” ve ” stil.css ” olarak belirliyoruz.

Sayfalarımızdan ilk olarak ” index.html ” i açıyoruz. Bu sayfada yapacağımız tek işlem olan div’ leri oluşturuyoruz. Bu makalede üç farklı uygulama anlatılacağı için 3 adet div oluşturuyoruz ve isimlerini de ” uyg1 , uyg2 , uyg3 ” şeklinde veriyoruz.

<html>
    <head>
    <title>BilgiSayaci.Org - CSS3 'te Scale & Transform & Rotate İşlemleri</title>
    <link rel="stylesheet" type="text/css" href="stil.css" />
    </head>
    <body>
    <div class="uyg1"></div>
    <div class="uyg2"></div>
    <div class="uyg3"></div>
    </body>
</html>

Daha sonra stil sayfamızı açıyoruz ve ilk olarak div ‘lerimizin ortaya çıkması için background , width , height , border , margin gibi değerlerini veriyoruz.

.uyg1{width: 200px; height: 200px; border: 2px solid #000; background-color: #ff0000; float: left; margin-right: 100px;}
.uyg2{width: 200px; height: 200px; border: 2px solid #000; background-color: #0000ff; float: left; margin-right: 100px;}
.uyg3{width: 200px; height: 200px; border: 2px solid #000; background-color: #fcff00; float: left;}

Bu işlemleri yaptıysanız ” index.html ” dosyasında üç adet kutunun görünür olmuş olması gerekir. Şimdi makale başlığında belirttiğimiz sıraya göre işlemlerimizi yapmaya başlayabiliriz. ” uyg1 ” adlı div ‘imizi döndürme( transform ) işlemi için kullanacağız. Stil sayfamızı açıyoruz ve ” uyg1 ” isimli div ‘imizin :hover özelliğine şu kodu ekliyoruz

.uyg1:hover
{
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}

Bir diğer özelliğimiz olan büyütme( scale ) işlemi için ise ” uyg2 ” isimli div ‘imizi kullanacağız. Stil dosyamızı açıyoruz ve ” uyg2 ” nin :hover özelliğine aşşağıdaki kodu ekliyoruz.

.uyg2:hover
{
    transform: scale(2);
    -moz-transform: scale(2);
    -webkit-transform: scale(2);
    -o-transform: scale(2);
    -ms-transform: scale(2);
}

Son işlemimiz olan eğim verme( skew ) özelliğine geçtiğimizde ise kullanacağımız div ” uyg3 ” olacaktır. Bu div ‘imiz içinde stil dosyamızı açıyoruz ve :hover özelliği için aşşağıda bulunan kodu yazıyoruz.

.uyg3:hover
{
    transform: skew(10deg,20deg);
    -moz-transform: skew(10deg,20deg);
    -webkit-transform: skew(10deg,20deg);
    -o-transform: skew(10deg,20deg);
    -ms-transform: skew(10deg,20deg);
}

Güzel bir makalenin ardından işlemlerimiz artık sonlandırılmıştır 🙂 Bu işlemleri daha düzenli bir görünüm için background gibi , border gibi özellikleri ayarladıktan sonra yazının başında da söylediğim gibi yaptığınız tasarımların belli başlı noktalarında rahatlıkla kullanabilirsiniz.
Bir Başka makalede görüşmek dileğiyle iyi çalışmalar 🙂

Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 3 No ‘lu Maddeden İndirebilirsiniz..

Reklam

Tüm Yorumlar

Leave a Reply

Your email address will not be published. Required fields are marked *