Css3 transform, css3
<! DOCTYPE html> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "> <style type =" text/css "> div {margin: 30px 0px 80px; width: 200px; height: 50px; font-size: 18px; font-weight: bold; background: none repeat scroll 0% 0% # DEE4EE; color: #305999; text-align: center; line-height: 50px ;}. a1: hover {transform: scale (0.5 );}. a2 {transform: translate (40px, 0px );}. a3 {transform: rotate (600deg );}. a4 {transform: skew (10deg, 2deg );}. a5 {transform: matrix (1.678,-0.256, 1.522, 2.333,-51.533,-1.989 );}. a6 {transform: rotate (45deg); transform-origin: 10% 10% ;} </style> <script type = "text/javascript"> </script> </HEAD> <BODY> <div class = 'a1'> scale down transform </div> <div class = 'a2 '> transform translate: move x and y in the direction </div> <div class = 'a3 '> transform rotate: rotate </div> <div class = 'a4'> transform skew: diagonal cutting </div> <div class = 'a5 '> transform matrix </div> <div style = 'border: 1px solid # FF0000; '> <div class = 'a6'> transform origin </div> </BODY> </HTML>
Matrix