CSS Transform Özelliği

13 Ekim 2021 1068 kez okundu

CSS Transform Özelliği, Türkçesiyle Döndürme özelliği sayesinde div bloklarına veya görsellere çeşitli görsel efektler uygulayabiliriz.
Bu görsel efektler içerisinde; döndürme, hareket ettirme, kaydırma, büyütme, küçültme, eğdirme işlemleri yapılabilmektedir.

! Kutucuklara mouse ile üzerine geldiğiniz zaman dönüşümleri görebilirsiniz.

İçindekiler

Translate parametresi

Bir öğeyi; dikey veya yatay bir biçimde taşımak, çevirmek için kullanılır.
transform: translate(100px); şeklinde kullanılır.
Hareket derecesini belirlemek için px türünde belirtme yapıyoruz.

Kutucuğu sağa doğru kaydırmak istersek, 100px şeklinde belirtiyoruz.

        .kutu1 
        {
            width: 300px;
            height: 300px;
            background-color: green;
        }

        .kutu1:hover 
        {
            transform: translate(100px);
        }

.kutu1

{

width: 300px;

height: 300px;

background-color: green;

}

.kutu1:hover

{

transform: translate(100px);

}

Kutucuğu sola doğru kaydırmak istersek -100px şeklinde belirtiyoruz.

        .kutu1 
        {
            width: 300px;
            height: 300px;
            background-color: green;
        }

        .kutu1:hover 
        {
            transform: translate(-100px);
        }

.kutu1

{

width: 300px;

height: 300px;

background-color: green;

}

.kutu1:hover

{

transform: translate(-100px);

}

Kutucuğu yukarıya doğru kaydırmak istersek 0px,-100px şeklinde belirtiyoruz.

        .kutu1 
        {
            width: 300px;
            height: 300px;
            background-color: green;
        }

        .kutu1:hover 
        {
            transform: translate(0px,-100px);
        }

.kutu1

{

width: 300px;

height: 300px;

background-color: green;

}

.kutu1:hover

{

transform: translate(0px,-100px);

}

Kutucuğu aşağıya doğru kaydırmak istersek 0px,100px şeklinde belirtiyoruz.

        .kutu1 
        {
            width: 300px;
            height: 300px;
            background-color: green;
        }

        .kutu1:hover 
        {
            transform: translate(0px,100px);
        }

.kutu1

{

width: 300px;

height: 300px;

background-color: green;

}

.kutu1:hover

{

transform: translate(0px,100px);

}

Kutucuğu sağ aşağı çapraz olacak şekilde kaydırmak istersek 100px,100px şeklinde belirtiyoruz.

        .kutu1 
        {
            width: 300px;
            height: 300px;
            background-color: green;
        }

        .kutu1:hover 
        {
            transform: translate(100px,100px);
        }

.kutu1

{

width: 300px;

height: 300px;

background-color: green;

}

.kutu1:hover

{

transform: translate(100px,100px);

}

Kutucuğu sağ yukarı çapraz olacak şekilde kaydırmak istersek 100px,-100px şeklinde belirtiyoruz.

        .kutu1 
        {
            width: 300px;
            height: 300px;
            background-color: green;
        }

        .kutu1:hover 
        {
            transform: translate(100px,-100px);
        }

.kutu1

{

width: 300px;

height: 300px;

background-color: green;

}

.kutu1:hover

{

transform: translate(100px,-100px);

}

Kutucuğu sol aşağı çapraz olacak şekilde kaydırmak istersek -100px,100px şeklinde belirtiyoruz.

        .kutu1 
        {
            width: 300px;
            height: 300px;
            background-color: green;
        }

        .kutu1:hover 
        {
            transform: translate(-100px,100px);
        }

.kutu1

{

width: 300px;

height: 300px;

background-color: green;

}

.kutu1:hover

{

transform: translate(-100px,100px);

}

Kutucuğu sol yukarı çapraz olacak şekilde kaydırmak istersek -100px,-100px şeklinde belirtiyoruz.

        .kutu1 
        {
            width: 300px;
            height: 300px;
            background-color: green;
        }

        .kutu1:hover 
        {
            transform: translate(-100px,-100px);
        }

.kutu1

{

width: 300px;

height: 300px;

background-color: green;

}

.kutu1:hover

{

transform: translate(-100px,-100px);

}

Rotate parametresi

Rotate parametresi, adından da anlaşılacağı üzere nesneyi döndürmek için kullanılan bir parametre türüdür. Nesnenin kaç derece döneceğini “deg” türünde belirtmekteyiz.
transform: rotate(90deg);şeklinde kullanılır.

Kutucuğu 90 derece sağa döndürmek istersek, rotate değerini 90deg yapıyoruz.

        .kutu1 
        {
            width: 300px;
            height: 300px;
            background-color: green;
        }

        .kutu1:hover 
        {
            transform: rotate(90deg);
        }

.kutu1

{

width: 300px;

height: 300px;

background-color: green;

}

.kutu1:hover

{

transform: rotate(90deg);

}

Kutucuğu 45 derece sağa döndürmek istersek, rotate değerini 45deg yapıyoruz.

        .kutu1 
        {
            width: 300px;
            height: 300px;
            background-color: green;
        }

        .kutu1:hover 
        {
            transform: rotate(45deg);
        }

.kutu1

{

width: 300px;

height: 300px;

background-color: green;

}

.kutu1:hover

{

transform: rotate(45deg);

}

Kutucuğu 90 derece sola döndürmek istersek, rotate değerini -90deg yapıyoruz.

        .kutu1 
        {
            width: 300px;
            height: 300px;
            background-color: green;
        }

        .kutu1:hover 
        {
            transform: rotate(-90deg);
        }

.kutu1

{

width: 300px;

height: 300px;

background-color: green;

}

.kutu1:hover

{

transform: rotate(-90deg);

}

Kutucuğu 45 derece sola döndürmek istersek, rotate değerini -45deg yapıyoruz.

        .kutu1 
        {
            width: 300px;
            height: 300px;
            background-color: green;
        }

        .kutu1:hover 
        {
            transform: rotate(-45deg);
        }

.kutu1

{

width: 300px;

height: 300px;

background-color: green;

}

.kutu1:hover

{

transform: rotate(-45deg);

}

Skew parametresi

Skew parametresi ile kutucuğu yamultabiliriz. Yamultma işlemini yaparken derece ile ne miktarda yamulacağını belirtmekteyiz.
transform: skew(50deg); şeklinde kullanılır.

Kutucuğu 50 derece sağa doğru yamultmak istersek skew değerini -50deg yapıyoruz

        .kutu1 
        {
            width: 300px;
            height: 300px;
            background-color: green;
        }

        .kutu1:hover 
        {
            transform: skew(-50deg);
        }

.kutu1

{

width: 300px;

height: 300px;

background-color: green;

}

.kutu1:hover

{

transform: skew(-50deg);

}

Kutucuğu 50 derece sola doğru yamultmak istersek skew değerini 50deg yapıyoruz

        .kutu1 
        {
            width: 300px;
            height: 300px;
            background-color: green;
        }

        .kutu1:hover 
        {
            transform: skew(50deg);
        }

.kutu1

{

width: 300px;

height: 300px;

background-color: green;

}

.kutu1:hover

{

transform: skew(50deg);

}

Scale parametresi

Scale parametresi ile büyütme ve küçültme işlemlerini yapmaktayız. Çeşitli CSS özelleştirmelerinde scale parametresini kullanarak div bölümlerinizi, resimlerinizi veya menülerinizi özelleştirebilir farklı bir hava katabilirsiniz.
Küçültmek için: transform: scale(.3);
Büyültmek için: transform: scale(3);

Kutucuğu küçültmek istersek scale değerini .3 olarak belirtiyoruz.

        .kutu1 
        {
            width: 300px;
            height: 300px;
            background-color: green;
        }

        .kutu1:hover 
        {
            transform: scale(.3);
        }

.kutu1

{

width: 300px;

height: 300px;

background-color: green;

}

.kutu1:hover

{

transform: scale(.3);

}

Kutucuğu büyültmek istersek scale değerini 3 olarak belirtiyoruz.

        .kutu1 
        {
            width: 300px;
            height: 300px;
            background-color: green;
        }

        .kutu1:hover 
        {
            transform: scale(3);
        }

.kutu1

{

width: 300px;

height: 300px;

background-color: green;

}

.kutu1:hover

{

transform: scale(3);

}

CSS Transform Özelliği ile metin efektleri

Transform özelliklerini div blokları, resimler vb. elementlerde kullanıldığı gibi aynı zamanda metinlerde de kullanılabilir.
Örnekler ve kodlarla birlikte metinlerde nasıl kullanıldığını yakından inceleyelim.

Merhaba! Beni denemek için fare ile üzerime gel!

        .metin1
        {
            transition: 2s;
        }

        .metin1:hover 
        {
            transform: rotate(365deg) scale(3);  
        }

.metin1

{

transition: 2s;

}

.metin1:hover

{

transform: rotate(365deg) scale(3);

}

Merhaba! Beni denemek için fare ile üzerime gel!

        .metin1
        {
            transition: 2s;
        }

        .metin1:hover 
        {
            transform: translate(50px,-100px) scale(.1);  
        }

.metin1

{

transition: 2s;

}

.metin1:hover

{

transform: translate(50px,-100px) scale(.1);

}

Merhaba! Beni denemek için fare ile üzerime gel!

        .metin1
        {
            transition: 2s;
        }

        .metin1:hover 
        {
            transform: scale(2);  
        }

.metin1

{

transition: 2s;

}

.metin1:hover

{

transform: scale(2);

}

CSS Transform Özelliği kullanarak animasyonlu albüm yapımı

Transform özelliklerini kullanarak web sitesinde çeşitli özelleştirmeler yapılabildiği gibi aynı zamanda galeri tarzında bir yapı oluşturduğunuzda bunu da özelleştirebilmeniz mümkün. Yukarıda ki örneklerde, önizlemeleri yaparken fareyle üzerine geldiğiniz zaman animasyon harekete geçmekteydi. Bu hareketlendirmeleri yaparken css’in bir özelliği olan hover özelliğini kullanmaktayız. Hover özelliği ile fareyle üzerine geldiğimiz animasyonun tetiklenerek harekete geçmesini sağlamaktadır. Transform özelliği ile galeri yapacağımız zaman da hover özelliğini kullanacağız.

Galerimizde kullanacağımız transform özellikleri scale ve rotate. Fare ile üzerine geldiğimiz zaman resimler sağa doğru dönerek büyüyecek. Scale değerini 1.2 ve rotate değerini 5deg yapıyoruz.

        img {
            width: 400px;
            height: 400px;  
            transition: 2s;          
        }

        img:hover {
            transform: scale(1.2) rotate(5deg);
        }

img {

width: 400px;

height: 400px;

transition: 2s;

}

img:hover {

transform: scale(1.2) rotate(5deg);

}

    <img src="https://www.kodkampusu.com/wp-content/uploads/2018/01/restaurant.jpg"/>
    <img src="https://www.kodkampusu.com/wp-content/uploads/2018/01/cyclng.jpg"/>
    <img src="https://www.kodkampusu.com/wp-content/uploads/2018/01/scuba-diving.jpg"/>
    <img src="https://www.kodkampusu.com/wp-content/uploads/2018/01/hurricane.jpg"/>   
    <img src="https://www.kodkampusu.com/wp-content/uploads/2018/01/annapurna.jpg"/>   
    <img src="https://www.kodkampusu.com/wp-content/uploads/2018/01/girl-hand.jpg"/>