css之div旋转效果
三、css之div旋转效果
grow-rotate-l grow-rotate-r rotate5 rotate15 rotate30 rotate60 rotate90 rotate180 rotate360 rotate-5 rotate-15 rotate-30 rotate-60 rotate-90 rotate-180
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>div旋转角度改变</title> <style type="text/css"> *{margin: 0px;padding: 0px;} .hover-con{margin:20px auto;padding:0px 10px;width: 80%; text-align: left;border: 1px solid #000000;} span{ display: inline-block; margin:20px; width: 120px; height: 40px; line-height: 40px; text-align: center; vertical-align: top; background:#0069D9; color: #FFFFFF; cursor: pointer; } .ech-grow-rotate-l,.ech-grow-rotate-r, .ech-rotate5, .ech-rotate15, .ech-rotate30, .ech-rotate60, .ech-rotate90, .ech-rotate180, .ech-rotate360, .ech-rotate-5,.ech-rotate-15, .ech-rotate-30, .ech-rotate-60, .ech-rotate-90, .ech-rotate-180{ transition: all .4s; } .ech-grow-rotate-l:hover { transform: scale(1.1) rotate(4deg); } .ech-grow-rotate-r:hover { transform: scale(1.1) rotate(-4deg); } .ech-rotate-5:hover { transform: rotate(-5deg); } .ech-rotate-15:hover { transform: rotate(-15deg); } .ech-rotate-30:hover { transform: rotate(-30deg); } .ech-rotate-60:hover { transform: rotate(-60deg); } .ech-rotate-90:hover { transform: rotate(-90deg); } .ech-rotate-180:hover { transform: rotate(-180deg); } .ech-rotate5:hover { transform: rotate(5deg); } .ech-rotate15:hover { transform: rotate(15deg); } .ech-rotate30:hover { transform: rotate(30deg); } .ech-rotate60:hover { transform: rotate(60deg); } .ech-rotate90:hover { transform: rotate(90deg); } .ech-rotate180:hover { transform: rotate(180deg); } .ech-rotate360:hover { transform: rotate(360deg); } </style> </head> <body> <div class="hover-con"> <span class="ech-grow-rotate-l">grow-rotate-l</span> <span class="ech-grow-rotate-r">grow-rotate-r</span> <span class="ech-rotate5">rotate5</span> <span class="ech-rotate15">rotate15</span> <span class="ech-rotate30">rotate30</span> <span class="ech-rotate60">rotate60</span> <span class="ech-rotate90">rotate90</span> <span class="ech-rotate180">rotate180</span> <span class="ech-rotate360">rotate360</span> <span class="ech-rotate-5">rotate-5</span> <span class="ech-rotate-15">rotate-15</span> <span class="ech-rotate-30">rotate-30</span> <span class="ech-rotate-60">rotate-60</span> <span class="ech-rotate-90">rotate-90</span> <span class="ech-rotate-180">rotate-180</span> </div> </body> </html>
DO What You Want !