JSFiddle - React, Tailwind, and code Playground

by Guruprasad Rao

HTML

<div class="icon-style-1">
    <div class="builder-element-icon glyphicon glyphicon-camera">
    </div>
</div>

CSS

.icon-style-1 .builder-element-icon{
    height: 100px;
    width: 100px;
    line-height: 100px;
    background: blue;
    line-height: 100px;
    text-align: center;
    margin: 0 auto;
    display: block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    color: white;
   /* Firefox */
	-moz-transition: all 1s ease;
	/* WebKit */
	-webkit-transition: all 1s ease;
	/* Opera */
	-o-transition: all 1s ease;
	/* Standard */
	transition: all 1s ease;
}    

.icon-style-1 .builder-element-icon:hover{
    background: green;
    /* Firefox */
	-moz-transform: rotate(360deg) ;
	/* WebKit */
	-webkit-transform:  rotate(360deg);
	/* Opera */
	-o-transform: rotate(360deg) ;
	/* Standard */
	transform: rotate(360deg) ;
}