CSS rotating banner

CSS rotating banner moves to and fro on mouse hover. It is used to make new offer for a product. It may be used for several other purposes.

Example

The widht, height, position, float, border, transform and animation porperties are used to make a rotating banner.

.string-rotate

Firstly, we make a string that rotates with the motion of square type banner. We specify a class name for the string.

Example

<style>
.string-rotate{
 width:150px;
 height:150px;
 border:1px solid black;
 border-right:none;
 border-bottom:none;
 border-radius:10px;
 transform:rotateZ(45deg);
 transform-origin:top left;
 position:absolute;
}
</style>
Try </>

.string-rotate class is defined for the string.

position:relative; property enables the descendent elements to move relative to this box (.string-rotate).
transform property rotates the string by 45 degree.
transform-origin property specifies the point to rotate around.

.nail-rotate

Now we make the nail to hang the banner. .nail-rotate class name is specified for the banner.

Example

<style>
.nail-rotate{
 display:block;
 width:10px;
 height:10px;
 border-radius:50%;
 background:black;
 box-shadow:4px 1px 2px 0px rgb(170,170,170);
}
</style>
Try </>

box-shadow property represents the shadow of the nail.

.banner-rotate

This banner should be designed and positioned in such a way that it seems to be hanged on the string.

Example

<style>
.banner-rotate{
 width:274px;
 height:70px;
 border:1px solid red;
 transform:rotateZ(-45deg);
 position:absolute;
 top:58px;
 left:-35px;
 background-color:red;
 border-radius:10px;
 box-shadow:5px 5px 5px 0px rgba(200,200,200,1);
}
</style>
Try </>

position:absolute; property must be used to specify the position of the banner relative to the parent element.

width, height, top and left properties should be adjusted correctly with the string.

transform property restores the banner back to the original position.

.content-area

Example

<style>
.content-area{
 width:260px;
 height:60px;
 border:1px dashed yellow;
 margin:4px auto;
 border-radius:10px;
 color:yellow;
 font-family:cursive;
}
</style>
Try </>

.content-area is the class name of the content area.

margin property aligns the content-area at the center of the banner.
auto value aligns the content-area at the center of parent box (.banner-rotate).
margin:4px; property represents the margin above and below the content-area.
4px is calculated as 4 = (270-270-2)/2.

Now we'll define the event i.e. when should the banner rotate?

Example

<style>
.string-rotate:hover{
 animation: vibrate 4s 1;
}
</style>

The animation-effect will be executed when a user hovers the mouse over the top most element (.string-rotate).

Here the name of animation is vibrate. The 4s is the animation duration. 1 means that the animation should be occurred only one.

keyframe rule

In a keyframe rule, the total time of animation-duration (4s here) is divided in different sub-intervals.

Different CSS properties can be assigned to the respective class in different sub-intervals

Example

<style>
@keyframes vibrate{
	
}
</style>

animation-duration has been divided in eight intervals. The difference between two intervals is 12.5% (100/8).

Example

<style>
@keyframes vibrate{
 0%{
 transform:rotateZ(45deg);
 }
 12.5%{
 transform:rotateZ(55deg);
 }
 25%{
 transform:rotateZ(45deg);
 }
 37.5%{
 transform:rotateZ(35deg);
 }
 50%{
 transform:rotateZ(45deg);
 }
 62.5%{
 transform:rotateZ(50deg);
 }
 75%{
 transform:rotateZ(45deg);
 }
 87.5%{
 transform:rotateZ(40deg);
 }
 100%{
 transform:rotateZ(45deg);
 }
}
</style>
Try </>