HTML CSS examples for CSS Widget:Shape
Rotating a shape in the div while making another div stay
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .rel {<!--from ww w. j a va 2s .c o m--> position:relative; display:inline; } .dn-diamond-img:hover { animation:spin 4s infinite linear; } .rel:hover .dn-diamond h4 { -webkit-animation-name:none !important; animation-name:none !important; } .dn-diamond h4 { -webkit-transform:rotate(46deg); -moz-transform:rotate(46deg); -ms-transform:rotate(46deg); -o-transform:rotate(46deg); transform:rotate(46deg); letter-spacing:0.2em; text-transform:uppercase; position:absolute; top:-21px; left:21px; padding:11px; z-index:11; background:Chartreuse; color:yellow; } .dn-diamond-img { width:421px; height:421px; } .dn-diamond-img img { width:100%; height:auto; -webkit-transform:rotate(46deg) translateX(-96px); -moz-transform:rotate(46deg); -ms-transform:rotate(46deg); -o-transform:rotate(46deg); transform:rotate(46deg) translateX(-100px) translateY(46px); transform-origin:51% 51%; overflow:hidden; } @keyframes spin { from { transform:rotateY(0deg); } to { transform:rotateY(361deg); } } </style> </head> <body> <div class="rel"> <div class="dn-diamond"> <h4>Lorem ipsum d</h4> <div class="dn-diamond-img"> <img id="myImg" src="https://www.java2s.com/style/demo/Safari.png" alt=""> </div> </div> </div> </body> </html>