How To Rotate A Div Using CSS3
In This CSS Tutorial we will see How To Rotate Div In Mouse Hover With Transition Using HTML And CSS3 Transform Property In Netbeans Editor .
Project Source Code:
<!DOCTYPE html>
<html>
<head>
<title>CSS3 - Rotate Div</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container{
background-color: #ddd;
padding: 25px;
}
.content{
width: 100px;height: 100px;background-color: red;
transition: all 2s ease-in-out;
transform: rotate(45deg);
}
.content:hover{
transform: rotate(-180deg);
}
.child{width: 25px;height: 25px;}
.child1{float: left;background-color: black;}
.child2{float: right;background-color: yellow;}
.child3{float: left;background-color: #fff;margin-top: 50%}
.child4{float: right;background-color: blue;margin-top: 50%}
.clearFloat{clear: both}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="child child1"></div>
<div class="child child2"></div>
<div class="clearFloat"></div>
<div class="child child3"></div>
<div class="child child4"></div>
</div>
</div>
</body>
</html>