transform-origin :

Dönüşümün orjin olarak nereye referans alacağını tanımlamamızı sağlar.

Not: Bu özelliğin transform özelliğiyle birlikte kullanılması gerekir.

Örnek

div {
  margin: 50px;
  background: green;
  width: 300px;
  height: 300px;
  color: white;
  -ms-transform: rotate(150deg); /* IE 9 */
  -ms-transform-origin: 50% 50%; /* IE 9 */
  -webkit-transform: rotate(150deg); /* Chrome, Safari, Opera */
  -webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */
   transform: rotate(150deg);
   transform-origin: 50% 50%;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer	Açıklama
x-axis	Görünümün x ekseni olarak yerleştirileceğini tanımlar.
y-axis	Görünümün y ekseni olarak yerleştirileceğini tanımlar.
z-axis	Görünümün z ekseni olarak yerleştirileceğini tanımlar.
length	Yüzdeli, px, em, cm gibi değerler alabilir.
İnital
İnherit

Tarayıcı Desteği

Özellik
Transform(2D)	36.0 4.0-webkit	16.0 3.5-moz	10.0 9.0-ms	9.0 3.2-webkit	23.0 15.0-webkit 10.5-o
Transform(3D)	36.0 12.0-webkit	16.0 10.0-moz	10.0	9.0 4.0-webkit	23.0 15.0-webkit