Css Transform Rotate İşlemi
Css

Css Transform Rotate İşlemi

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


author

Aykut Erdoğan

transform, rotate, div, css

  • Bu Yazılara da Gözat:

    0 Yorum

    Cevapla