CSS3 İLE TRANSFORM DÖNÜŞTÜRME

Tarhi : 06-02-2020 06:30:00 | Yazar : ÇAĞLAR BOSTANCI

CSS3 İLE TRANSFORM MATRİX

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()) X ve Y etrafında 2D dönüşüm uygular. Dönüşüm için altılı bir matris değerler (a,b,c,d,e,f) kullanılır.

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
		<!--ÇAĞLARBOSTANCI-->
    	<title>CSS3 TRANSFORM</title>
        <style>
		body{ margin: 0; padding:0; color:white; text-align:center;}

			.kutu{
				width:250px;
				height:250px;
				background-color:darkred;
				transition:all 1s ease;
				}
			.kutu:hover{
			/*matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())*/
  -ms-transform: matrix(1, -0.3, 0, 1, 100, 100); 
  -webkit-transform: matrix(1, -1, 0, 1, 100, 100); 
  transform: matrix(1, -1, 0, 1, 100, 100); /* Standard syntax */
				
				}
			
        </style>
    </head>
  <body>
  <div class="kutu">Çağlar Bostancı</div>
  </body>
  </html>

<!DOCTYPE html>

<html>

<head>

<title>CSS3 TRANSFORM</title>

<style>

body{ margin: 0; padding:0; color:white; text-align:center;}

.kutu{

width:250px;

height:250px;

background-color:darkred;

transition:all 1s ease;

}

.kutu:hover{

/*matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())*/

-ms-transform: matrix(1, -0.3, 0, 1, 100, 100);

-webkit-transform: matrix(1, -1, 0, 1, 100, 100);

transform: matrix(1, -1, 0, 1, 100, 100); /* Standard syntax */

}

</style>

</head>

<body>

<div class="kutu">Çağlar Bostancı</div>

</body>

</html>

CSS3 İLE TRANSFORM ROTATE

rotate(açı olarak değer) x ve y ekseni doğrultusunda saat yönünde döndürme işlemi yapar. İşlem bir matris [cos(açı)sin(açı)-sin()cos(açı)0 0] karşılık gelir.

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
		<!--ÇAĞLARBOSTANCI-->
    	<title>CSS3 TRANSFORM</title>
        <style>

			.resim1{
				width:250px;
				height:250px;
				background-color:darkred;
				transition:all 1s ease;
				}
			.resim1:hover{
				transform:rotate(360deg);
				-webkit-transform:rotate(360deg);
				-moz-transform:rotate(360deg);
				
				}
			
        </style>
    </head>
  <body>
  <div class="resim1"></div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS3 TRANSFORM</title>

<style>

.resim1{

width:250px;

height:250px;

background-color:darkred;

transition:all 1s ease;

}

.resim1:hover{

transform:rotate(360deg);

-webkit-transform:rotate(360deg);

-moz-transform:rotate(360deg);

}

</style>

</head>

<body>

</body>

</html>

CSS3 İLE TRANSFORM SCALE KULLANIMI

scale(Sx,Sy) X ve Y doğrultusunda 2D ölçülendirme işlemi yapar. Sy değeri verilmediğinde Sx eşit olduğu varsayılır.

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
		<!--ÇAĞLARBOSTANCI-->
    	<title>CSS3 TRANSFORM</title>
        <style>
		body{ margin: 0; padding:0; color:white; text-align:center;}

			.kutu{
				width:250px;
				height:250px;
				background-color:darkred;
				transition:all 1s ease;
				}
			.kutu:hover{
				transform:scale(2,2);
				-webkit-transform:scale(2,2);
				-moz-transform:scale(2,2);
				
				}
			
        </style>
    </head>
  <body>
  <div class="kutu">Çağlar Bostancı</div>
 </body>
 </html>

<!DOCTYPE html>

<html>

<head>

<title>CSS3 TRANSFORM</title>

<style>

body{ margin: 0; padding:0; color:white; text-align:center;}

.kutu{

width:250px;

height:250px;

background-color:darkred;

transition:all 1s ease;

}

.kutu:hover{

transform:scale(2,2);

-webkit-transform:scale(2,2);

-moz-transform:scale(2,2);

}

</style>

</head>

<body>

<div class="kutu">Çağlar Bostancı</div>

</body>

</html>

scaleX x ekseni yönünde ölçeklendirmeyi (uzamsı ya da kısalması) sağlar. Aldığı değer elementin uzunluğu ile çarpan durumundadır. Örneğin elementin eni 100 ise ve değeri verildiyse uzama 200 olarak elde edilir.

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
		<!--ÇAĞLARBOSTANCI-->
    	<title>CSS3 TRANSFORM</title>
        <style>
		body{ margin: 0; padding:0; color:white; text-align:center;}

			.kutu{
				width:250px;
				height:250px;
				background-color:darkred;
				transition:all 1s ease;
				}
			.kutu:hover{

				transform:scaleX(2);
				-webkit-transform:scaleX(2);
				-moz-transform:scaleX(2);
				
				}
			
        </style>
    </head>
  <body>
  <div class="kutu">Çağlar Bostancı</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS3 TRANSFORM</title>

<style>

body{ margin: 0; padding:0; color:white; text-align:center;}

.kutu{

width:250px;

height:250px;

background-color:darkred;

transition:all 1s ease;

}

.kutu:hover{

transform:scaleX(2);

-webkit-transform:scaleX(2);

-moz-transform:scaleX(2);

}

</style>

</head>

<body>

<div class="kutu">Çağlar Bostancı</div>

</body>

</html>

scaleY y ekseni yönünde ölçeklendirmeyi (uzması ya da kısalması) sağlar. Aldığı değer elementin uzunluğu ile çarpan durumundadır.

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
		<!--ÇAĞLARBOSTANCI-->
    	<title>CSS3 TRANSFORM</title>
        <style>
		body{ margin: 0; padding:0; color:white; text-align:center;}

			.kutu{
				width:250px;
				height:250px;
				background-color:darkred;
				transition:all 1s ease;
				}
			.kutu:hover{

				transform:scaleY(2);
				-webkit-transform:scaleY(2);
				-moz-transform:scaleY(2);
				
				}
			
        </style>
    </head>
  <body>
  <div class="kutu">Çağlar Bostancı</div>
  </body>
  </html>

<!DOCTYPE html>

<html>

<head>

<title>CSS3 TRANSFORM</title>

<style>

body{ margin: 0; padding:0; color:white; text-align:center;}

.kutu{

width:250px;

height:250px;

background-color:darkred;

transition:all 1s ease;

}

.kutu:hover{

transform:scaleY(2);

-webkit-transform:scaleY(2);

-moz-transform:scaleY(2);

}

</style>

</head>

<body>

<div class="kutu">Çağlar Bostancı</div>

</body>

</html>

CSS TRANSFORM YANSITMA ÖZELLİĞİ

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
		<!--ÇAĞLARBOSTANCI-->
    	<title>CSS3 TRANSFORM</title>
        <style>
		body{ margin: 0; padding:0; color:white; text-align:center;}

			.kutu{
				width:250px;
				height:250px;
				background-color:darkred;
				transition:all 1s ease;
				}
			.kutu:hover{

				transform:scaleX(-1);
				-webkit-transform:scaleX(-1);
				-moz-transform:scaleX(-1);
				
				}
			
        </style>
    </head>
  <body>
  <div class="kutu">Çağlar Bostancı</div>
  </body>
  </html>

<!DOCTYPE html>

<html>

<head>

<title>CSS3 TRANSFORM</title>

<style>

body{ margin: 0; padding:0; color:white; text-align:center;}

.kutu{

width:250px;

height:250px;

background-color:darkred;

transition:all 1s ease;

}

.kutu:hover{

transform:scaleX(-1);

-webkit-transform:scaleX(-1);

-moz-transform:scaleX(-1);

}

</style>

</head>

<body>

<div class="kutu">Çağlar Bostancı</div>

</body>

</html>

YANSIMA ÖRNEK 2

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
		<!--ÇAĞLARBOSTANCI-->
    	<title>CSS3 TRANSFORM</title>
        <style>
			img{
				width:150px;
				height:150px;
				}
			img:hover{
				transform: scaleX(-1);
				-webkit-transform:scaleX(-1);
				-moz-transform:scaleX(-1);
				}
			
        </style>
    </head>
  <body>
  <img src="1.jpg"/>
  <img src="1.jpg" class="yansima"/>
    
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS3 TRANSFORM</title>

<style>

img{

width:150px;

height:150px;

}

img:hover{

transform: scaleX(-1);

-webkit-transform:scaleX(-1);

-moz-transform:scaleX(-1);

}

</style>

</head>

<body>

</body>

</html>

CSS TRANSFORM SKEW KULLANIMI

skew X ve Y eksenleri doğrultusunda verilen açı kadar eğim verir. İlk parametre zorunludu, ikinci parametre verilmediğinde y ekseni üzerinde eğrilik oluşmaz.

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
		<!--ÇAĞLARBOSTANCI-->
    	<title>CSS3 TRANSFORM</title>
        <style>
		body{ margin: 0; padding:0; color:white; text-align:center;}

			.kutu{
				width:250px;
				height:250px;
				background-color:darkred;
				transition:all 1s ease;
				}
			.kutu:hover{
				transform: skew(30deg,30deg);
				-webkit-transform:skew(30deg,30deg);
				-moz-transform:skew(30deg,30deg);
				}
			
        </style>
    </head>
  <body>
  <div class="kutu">Çağlar Bostancı</div>
  </body>
  </html>

<!DOCTYPE html>

<html>

<head>

<title>CSS3 TRANSFORM</title>

<style>

body{ margin: 0; padding:0; color:white; text-align:center;}

.kutu{

width:250px;

height:250px;

background-color:darkred;

transition:all 1s ease;

}

.kutu:hover{

transform: skew(30deg,30deg);

-webkit-transform:skew(30deg,30deg);

-moz-transform:skew(30deg,30deg);

}

</style>

</head>

<body>

<div class="kutu">Çağlar Bostancı</div>

</body>

</html>

SkewX Kullanımı

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
		<!--ÇAĞLARBOSTANCI-->
    	<title>CSS3 TRANSFORM</title>
        <style>
		body{ margin: 0; padding:0; color:white; text-align:center;}

			.kutu{
				width:250px;
				height:250px;
				background-color:darkred;
				transition:all 1s ease;
				}
			.kutu:hover{

				transform: skewX(30deg);
				-webkit-transform:skewX(30deg);
				-moz-transform:skewX(30deg);
				
				}
			
        </style>
    </head>
  <body>
  <div class="kutu">Çağlar Bostancı</div>
  </body>
  </html>

<!DOCTYPE html>

<html>

<head>

<title>CSS3 TRANSFORM</title>

<style>

body{ margin: 0; padding:0; color:white; text-align:center;}

.kutu{

width:250px;

height:250px;

background-color:darkred;

transition:all 1s ease;

}

.kutu:hover{

transform: skewX(30deg);

-webkit-transform:skewX(30deg);

-moz-transform:skewX(30deg);

}

</style>

</head>

<body>

<div class="kutu">Çağlar Bostancı</div>

</body>

</html>

CSS3 TRANSFORM skewY KULLANIMI

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
		<!--ÇAĞLARBOSTANCI-->
    	<title>CSS3 TRANSFORM</title>
        <style>
		body{ margin: 0; padding:0; color:white; text-align:center;}

			.kutu{
				width:250px;
				height:250px;
				background-color:darkred;
				transition:all 1s ease;
				}
			.kutu:hover{

				transform: skewY(30deg);
				-webkit-transform:skewY(30deg);
				-moz-transform:skewY(30deg);
				
				}
			
        </style>
    </head>
  <body>
  <div class="kutu">Çağlar Bostancı</div>
  </body>
  </html>

<!DOCTYPE html>

<html>

<head>

<title>CSS3 TRANSFORM</title>

<style>

body{ margin: 0; padding:0; color:white; text-align:center;}

.kutu{

width:250px;

height:250px;

background-color:darkred;

transition:all 1s ease;

}

.kutu:hover{

transform: skewY(30deg);

-webkit-transform:skewY(30deg);

-moz-transform:skewY(30deg);

}

</style>

</head>

<body>

<div class="kutu">Çağlar Bostancı</div>

</body>

</html>

CSS3 TRANSFORM TRANSLATE KULLANIMI

translate[tx|ty] vektörü ile özel bir 2D görünümü sağlar. ty değeri verilmezse 0 olarak kabul edilir.

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
		<!--ÇAĞLARBOSTANCI-->
    	<title>CSS3 TRANSFORM</title>
        <style>
		body{ margin: 0; padding:0; color:white; text-align:center;}

			.kutu{
				width:250px;
				height:250px;
				background-color:darkred;
				transition:all 1s ease;
				}
			.kutu:hover{
			/*transform: translate(x,y);*/
				transform: translate(250px,100px);
				-webkit-transform: translate(250px,100px);
				-moz-transform: translate(250px,100px);
				
				}
			
        </style>
    </head>
  <body>
  <div class="kutu">Çağlar Bostancı</div>
  </body>
  </html>

<!DOCTYPE html>

<html>

<head>

<title>CSS3 TRANSFORM</title>

<style>

body{ margin: 0; padding:0; color:white; text-align:center;}

.kutu{

width:250px;

height:250px;

background-color:darkred;

transition:all 1s ease;

}

.kutu:hover{

/*transform: translate(x,y);*/

transform: translate(250px,100px);

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

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

}

</style>

</head>

<body>

<div class="kutu">Çağlar Bostancı</div>

</body>

</html>

CSS3 TRANSFORM TRANSLATEX-Y KULLANIMI

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
		<!--ÇAĞLARBOSTANCI-->
    	<title>CSS3 TRANSFORM</title>
        <style>
		body{ margin: 0; padding:0; color:white; text-align:center;}

			.kutu{
				width:250px;
				height:250px;
				background-color:darkred;
				transition:all 1s ease;
				}
			.kutu:hover{
			/*transform: translate(x,y);*/
				transform: translateY(100px);
				-webkit-transform: translateY(100px);
				-moz-transform:translateY(100px);
				
				}
			
        </style>
    </head>
  <body>
  <div class="kutu">Çağlar Bostancı</div>
  </body>
  </html>

<!DOCTYPE html>

<html>

<head>

<title>CSS3 TRANSFORM</title>

<style>

body{ margin: 0; padding:0; color:white; text-align:center;}

.kutu{

width:250px;

height:250px;

background-color:darkred;

transition:all 1s ease;

}

.kutu:hover{

/*transform: translate(x,y);*/

transform: translateY(100px);

-webkit-transform: translateY(100px);

-moz-transform:translateY(100px);

}

</style>

</head>

<body>

<div class="kutu">Çağlar Bostancı</div>

</body>

</html>

TRANSLATEX-Y KULLANIMI

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
		<!--ÇAĞLARBOSTANCI-->
    	<title>CSS3 TRANSFORM</title>
        <style>
		body{ margin: 0; padding:0; color:white; text-align:center;}

			.kutu{
				width:250px;
				height:250px;
				background-color:darkred;
				transition:all 1s ease;
				}
			.kutu:hover{
			/*transform: translate(x,y);*/
				transform: translateX(100px);
				-webkit-transform: translateX(100px);
				-moz-transform:translateX(100px);
				
				}
			
        </style>
    </head>
  <body>
  <div class="kutu">Çağlar Bostancı</div>
  </body>
  </html>

<!DOCTYPE html>

<html>

<head>

<title>CSS3 TRANSFORM</title>

<style>

body{ margin: 0; padding:0; color:white; text-align:center;}

.kutu{

width:250px;

height:250px;

background-color:darkred;

transition:all 1s ease;

}

.kutu:hover{

/*transform: translate(x,y);*/

transform: translateX(100px);

-webkit-transform: translateX(100px);

-moz-transform:translateX(100px);

}

</style>

</head>

<body>

<div class="kutu">Çağlar Bostancı</div>

</body>

</html>

İlgili

CSS

CSS3 İLE TRANSFORM DÖNÜŞTÜRME

Hemen Başla

Yorumlar

Yorum Yap

Konu ile ilgili olarak mail gönderebilirsiniz.

Çağlar Bostancı

CSS3 İLE TRANSFORM DÖNÜŞTÜRME