Merhaba arkadaşlar. Bu makalemizde css ile basit bir işlemi paylaşacağım sizlerle. Yukarıda gördüğünüz üzere divlerimizi transform-rotate ile istediğimiz açıda çevireceğiz. Şimdi geçelim kodlarımıza. Öncelikle css kodlarımızı sayfamızda sırasıyla head ve style etiketleri arasına yazacağız.
Css Kodlarımız:

div

{

color:#FFFFFF;

width:100px;

height:75px;

background-color:red;

border:1px solid black;

margin-left:150px;

}

div#div2

{

transform:rotate(30deg);

-ms-transform:rotate(30deg); /* IE 9 */

-moz-transform:rotate(30deg); /* Firefox */

-webkit-transform:rotate(30deg); /* Safari ve Chrome */

-o-transform:rotate(30deg); /* Opera */

}

div#div3

{

transform:rotate(-30deg);

-ms-transform:rotate(-30deg); /* IE 9 */

-moz-transform:rotate(-30deg); /* Firefox */

-webkit-transform:rotate(-30deg); /* Safari ve Chrome */

-o-transform:rotate(-30deg); /* Opera */

}

Burada öncelikle kullandığımız tüm divlerin kapsayacağı özellikleri tanımladık sonrasında ikinci divimizin hangi açıyla döndürüleceğini yazıyoruz. Sonrasında üçüncü divimizin hangi açıyla döndürüleceğini yazdık. -30 şeklinde bir tanımlama yaptık bu ikinci divimizin tam tersi yönde yani sol tarafa döndürülmesi anlamına gelmektedir. Şimdi geçelim html kodlarımıza.

<div>Bu 1. Divimiz</div>

<div id="div2">&nbsp;2. Divimiz</div>

<div id="div3">&nbsp;3. Divimiz</div>

Html kodlarımızıda body etiketlerinin arasına yazdık ve makalemizin sonuna geldik. Bir sonraki makalede görüşmek üzere...