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...