Home > Developer > Web Develop
css2d Transform
Transform
Rotate () selection function (deg)
<style> Div{width: + px; height: + px; margin: + px Auto; transition: 2s; background: #9BFF67; transform-origin: Right bottom; } Div: Hover{transform: rotate (deg);} </style></head><body> <div></div></body>When the mouse hovers over the Div, the div rotates 360 degrees at the center of the lower right corner.
Skew (x, y) tilt function (deg)
SKEWX ()
Skewy ()
<style> Div{width: + px; height: + px; margin: + px Auto; transition: 2s; background: #9BFF67; } Div: Hover{transform: skewy (-deg);} </style></head><body> <div></div></body> Skewy () has a stretch in the vertical direction. SKEWX () has a stretch in the horizontal direction, skewx (30DEG) is as follows:
Scale (x, Y) scaling functions (positive, negative, and fractional), which are scaled in the X, Y direction if only one value is passed.
ScaleX ()
ScaleY ()
<style> . Box{width: + px; height: + px; background: red; margin: +px Auto; transition:all 2s; } . Box: Hover{transform: Scale (2);} </style></head><body> <div class="box"></div></body> Hover the mouse over the DIV and the box is magnified twice times. If you change to IMG, you can make the mouse hover, the image magnification effect. If ScaleX () or ScaleY () is specified, it is only in the horizontal or vertical direction and the other side remains unchanged.
The translate () displacement function (px), if only one value is passed, will only have a displacement in the X direction.
TranslateX ()
Translatey ()
Transform shorthand execution order, post-write first execution
various transformations are implemented through matrices.
Matrix (a,b,c,d,e,f) matrices function (low version IE)
Default value: Matrix (1,0,0,1,0,0)
scaling with matrices
X-axis scaling a=x*a;
Y-axis scaling d=y*d;
Displacement by Matrix
X-Axis Displacement: E=E+DISX
Y-Axis Displacement: F=f+disy
Tilt by Matrix
X-axis tilt: C=math.tan (Xdeg/180*math.pi)
Y-axis tilt: B=math.tan (Ydeg/180*math.pi)
1. Achieve Zoom
<style> . Box{width: + px; height: + px; margin: + px Auto; background: red; transition:1s; } . Box: Hover{transform:matrix (2,0,0,2,0,0) ; }</style>2. Realization of displacement
<style> . Box{width: + px; height: + px; margin: + px Auto; background: red; transition:1s; } . Box: Hover{transform:matrix (1,0,0,1, ); }</style>3, to achieve tilt
<style> . Box{width: + px; height: + px; margin: + px Auto; background: red; transition:1s; } . Box: Hover{transform:matrix (1,0,0.577,1,0,0 ); }</style>Inclined 30° in x direction
You can also set the value of a,b,c,d,e,f to achieve scaling, displacement, and skew
Matrix (a,b,c,d,e,f) matrices function
Rotate by Matrix
A=math.cos (DEG/180*MATH.PI);
B=math.sin (DEG/180*MATH.PI);
C=-math.sin (DEG/180*MATH.PI);
D=math.cos (DEG/180*MATH.PI);
Transform compatible IE9 The following versions of IE can only be implemented by the matrix
Filter:progid:DXImageTransform.Microsoft.Matrix (m11= 1, m12= 0, m21= 0, m22=1,sizingmethod= ' auto expand ');
The matrix under IE does not have E and f two parameters m11==a; M12==c; M21==b; M22==d
<style> . Box{width: + px; height: + px; margin: + px Auto; background: red; } . Box: Hover{transform:matrix (0.88,0.5,-0.5,0.88,0, 0); filter: progid:DXImageTransform.Microsoft. Matrix (m11= 0.88, m12=-0.5, m21= 0.5 , m22=0.88, sizingmethod=' auto Expand '); } </style></head><body> <div class="box"></div></body></html><script>Console.log (math. cos ()math. PI) + "| |" + math. Sin (+/-*math). PI));</script>CSS3 for 2D transformations
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
