Mein HTML Code:
HTML-Code:
<div id="header_container" style="position: fixed; top: 0px; left: 0px; width: 1910px; height: 50px; ">
<div class="background" style="position: fixed; top: 0px; left: 0px; width: 50px; height: 50px; ">
</div>
<div class="box rotate-it box2" style="position: fixed; top: 0px; left: 0px; ">
<div class="icon" style="position: fixed; top: 0px; left: 0px; width: 50px; height: 50px;">
</div>
</div>
<div class="box2 scale" style="position: fixed; top: 0px; left: 50px;" ></div>
</div>
div class="box2 scale" style="position: fixed; top: 0px; left: 50px;" ></div>
Dieser Teil soll lang gezogen werden wenn man auf diese div box <div class="box rotate-it box2" style="position: fixed; top: 0px; left: 0px; "></div>.
Und diese div box <div class="box rotate-it box2" style="position: fixed; top: 0px; left: 0px; "></div> soll sich dann drehen.
Code:
.box
{
overflow: hidden;
transition-duration: 0.8s;
transition-property: transform;
z-index: 0;
width: 50px;
height: 50px;
}
.rotate-it:hover,
.rotate{
-moz-transform:rotate(45deg); /* Firefox 3.6 Firefox 4 */
-webkit-transform:rotate(45deg); /* Safari */
-o-transform:rotate(45deg); /* Opera */
-ms-transform:rotate(45deg); /* IE9 */
transform:rotate(45deg);
}
Und das andere bekommich noch nicht hin.
LG Elias