Tuesday, May 13, 2014

Image rotate using CSS3

Image rotate using CSS3



Lets take a look.

Css Codes

<style>
        .img
        {
            width: 200px;
            height: 200px;
            margin: 100px;
            box-shadow: 0px 0px 10px 10px #000;
            background-color:#00CCFF;
            -webkit-transition: width 8s, height 8s, background-color 8s, -webkit-transform 8s;
            -moz-transition: width 8s, height 8s, background-color 8s, -moz-transform 8s;
            -op-transition: width 8s, height 8s, background-color 8s, -op-transform 8s;
        }
        .img:hover
        {
            -webkit-transform: rotate(5000deg);
            -moz-transform: rotate(5000deg);
            -op-transform: rotate(5000deg);
            background-color:#FF6600;
            cursor:pointer;
        }
    </style>

HTML Codes

<div class="img"></div>
Please share your comments and feedback.Thanks.

1 comment:

  1. Nice Sir Its Usefull To Me But Not Now Thanks For Coding

    ReplyDelete