<div id="rotateP">Saat yönünde 90 derece döndür</div>
<div id="rotateN">Saat yönünün tersine 90 derece döndür</div>
<div id="rotateX">3 boyutlu olarak X ekseninde 180 derece döndür</div>
<div id="rotateY">3 boyutlu olarak Y ekseninde 180 derece döndür</div>
div {
    width: 120px;
    height: 50px;
    background-color: cornflowerblue;
    color: #fff;
    text-align: center;
    margin: 60px;
    padding: 10px;
    transition: transform 2s;
}

#rotateP:hover {
    transform: rotate(90deg);
}

#rotateN:hover {
    transform: rotate(-90deg);
}
#rotateX:hover {
    transform: rotateX(180deg);
}

#rotateY:hover {
    transform: rotateY(180deg);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.