Hüseyin Tepe

CSS'DE TRANSFORM KULLANIM

Bu dersimizde CSS'te transform konusuna değineceğiz. transform dilimizde dönüşüm anlamına gelmektedir. CSS3 ile gelen bir teknolojidir ve yaygın olarak kullanılmaktadır.
Aşağıda örnek çalışmalarımızın CSS kodlarını ve HTML kodlarını vereceğim.
CSS kodlarını kopyalayarak bir CSS dosyası yapın ve bu CSS dosyasını link ile referans vererek HTML dosyasını da kaydedin.

Haydi lafı fazla uzatmadan başlayalım.

SCALE

Scale dilimizde ölçek anlamına gelmektedir. Uygulanan nesnenin boyutunu, ölçeğini değiştirmek için kullanılır.

CSS KODU:

HTML KODU:

Sonuc aşağıdaki gibi olacak.

H:200 W:200px olan divimiz mause üzerine gelince
H:300 W:300px olarak büyüyor.

CSS KODU:

HTML KODU:

Sonuc aşağıdaki gibi olacak.

Yumuşak Kenarlı istenilen boyotta büyüyen ve yuvarlak köşeli div
border-radius: 100px divi tam yuvarlak yapar 100px 'den küçülttükçe köşeler ovalleşerek kare biçimini alır. 0px tam kare olur.

CSS KODU:

HTML KODU:

Sonuc aşağıdaki gibi olacak. transition-duration: 3s; (3 saniye dir siz değiştirebilirsiniz)

Belirli saniyede istenilen ölçekte slayt olarak büyüyen div
H:200px W:200px olan boyut H:300px W:300px olarak büyüyor.
Tabi ölçeklendirme sizin istediğiniz kadar olacak

CSS KODU:

HTML KODU:

Sonuc aşağıdaki gibi olacak. mouse'yi resmin üzerine getirip resmin aktifleşerek değişimi görünüz.

CSS KODU:

HTML KODU:

Sonuc aşağıdaki gibi olacak. 5 saniye içerisinde renk değiştiren div,
Tabi siz zamanı ve renkleri istediğiniz biçimde değiştirebilirsiniz.

CSS KODU:

#animasyon-container {
    width: 400px;
    height: 60px;
    position: relative;
    margin: 20px;
    border-radius: 24px;
    background: gainsboro;
    box-shadow: 0 0 10px 4px mediumpurple;
}
#animasyon2 {
    width: 60px;
    height: 60px;
    position: relative;
    float: left;
    border-radius: 24px;
    background: green;
    animation: animasyonum2 10s infinite linear;
    -webkit-animation: animasyonum2 10s infinite linear;
}
#animasyon-yukleniyor {
    width: 300px;
    height: 60px;
    line-height: 60px;
    font-size: 24px;
    font-family: 'Conv_segoeui', Verdana, sans-serif;
    position: absolute;
    top: 0;
    color: mediumpurple;
    text-shadow: 1px 1px black;
    text-align: center;
    animation: animasyonum3 10s infinite ease-in-out;
    -webkit-animation: animasyonum3 10s infinite ease-in-out;
}
@keyframes animasyonum2 {
    0% { width: 50px;background: red;} 
    25% { width: 100px; background: orangered;} 
    50% { width: 200px; background: orange;} 
    75% { width: 300px; background: gold;}  
    100% { width: 400px;background: gren;} 
}
@-webkit-keyframes animasyonum2 {
    0% { width: 50px;background: red;} 
    25% { width: 100px; background: orangered;} 
    50% { width: 200px; background: orange;} 
    75% { width: 300px; background: gold;}  
    100% { width: 400px;background: gren;} 
}
@keyframes animasyonum3 {
    0% { opacity: 0;}
    100% { opacity: 1;} 
}
@-webkit-keyframes animasyonum3 {
    0% { opacity: 0;}
    100% { opacity: 1;} 
}

HTML KODU:

Sonuc aşağıdaki gibi olacak. (Yükleniyor animasyonu)

Yükleniyor...

Bilgi Teknolojileri Hakkında Çalışmalar

HTML Dersleri

CSS Dersleri

Network Dersleri

PC Teknikleri

Excel Kullanımı

İş veya Gezi Seyahatleim Anılar ve Oluşan Dostluklar

SAP Meterial (SAP Malzeme Modülü)

CSS'DE TRANSFORM KULLANIM