/css/style.css
https://bitbucket.org/sgospodarets/cross-browser-rotate-box · CSS · 51 lines · 48 code · 0 blank · 3 comment · 0 complexity · c0aafa6387f1a2b4701e2c228489b261 MD5 · raw file
- /* reset */
- body{
- margin:0;
- color:#000;
- font:16px/18px Arial, Verdana, Tahoma, sans-serif;
- background:#fff;
- }
- img{
- border-style:none;
- vertical-align: top;
- }
- /* styles */
- #wrapper{
- width: 950px;
- margin: auto;
- }
- .rotate-wrapper{
- width: 100px;
- height: 100px;
- overflow: hidden;
- position: relative;
- border: 5px solid #ccc;
- float: left;
- }
- .center-text{
- position: absolute;
- top: 0;
- left: 0;
- width: 100px;
- line-height: 100px;
- text-align: center;
- }
- .rotate{
- position: relative;
- float: left;
- }
- /* rotate image with CSS3 if possible */
- .csstransforms.csstransitions .rotate{
- -webkit-transition: all .5s ease-in-out;
- -moz-transition: all .5s ease-in-out;
- -o-transition: all .5s ease-in-out;
- -ms-transition: all .5s ease-in-out;
- transition: all .5s ease-in-out;
- }
- .csstransforms.csstransitions .rotate-wrapper:hover .rotate{
- -webkit-transform:rotate(90deg);
- -moz-transform:rotate(90deg);
- -o-transform:rotate(90deg);
- -ms-transform:rotate(90deg);
- transform:rotate(90deg);
- }