Home > Developer > Web Develop
The four-way conversion consists of four aspects: displacement, scaling, rotation, tilt
Shift "let element move position" transform:translate (100px,100px); Remark: 1. If you set only one value, the representation moves in the horizontal direction 2. If you set two values, the first value represents the horizontal direction, and the second value represents the vertical direction 3. You can set negative numbers, which represent the opposite direction 4. By translate moving the element position, it is relative to the element itself, . Zoom zooms out: transform:scale (2,1); Remark: 1. If a value is set, the width and height of the current element are enlarged or shrunk to the corresponding multiples. 2. If you set two values, the first value represents the magnification or reduction of the width, and the second value represents the magnification or reduction of the height. 3. The value cannot be set with any units and negative numbers cannot be set. 4. Set a value greater than 0 less than 1, which represents zoom out. 5. Rotation: transform:rotate (angle) remarks: 1. The units of the angle are deg for example: 30deg 2. If you set a positive number, it means clockwise rotation and counterclockwise rotation. Tilt: transform:skew (45deg,45deg); Remark: 1. If you set a value that represents the current element along the x-axis, let the y-axis tilt by 2. If you set two values, the first value along the x-axis, the y-axis, and the second value along the y-axis, the x-axis is tilted.
2.2D Conversion caseNote: 1. Transform belongs to a composite attribute. If you set multiple values, use compound notation : transform:translate (length, length) rotate () scale (0, 0) skew (angle, angle); 2. When the default element rotates or tilts, it rotates according to the center point .
If you want to change the rotation point (rotary axis), you can set it by Transform-origin.
The value can be a specific bearing name: Left | right | bottom
Or you can set a specific value: transform-origin:right bottom; Transform-origin:right 200px;
The mouse hovers over the box and the box moves to the right:<! DOCTYPE HTML >
<HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0"> <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge"> <title>Document</title> <style>Div{width:100px;Height:100px;Background-color:Red;
Transition Propertiestransition:transform 1s linear; }
Div:hover{//Set to move 400px transform in the positive direction:Translate (400px,0); } </style></Head><Body> <Div></Div></Body></HTML>
3, 3D conversion
Displacement 1. Transfrom:translatex (value); Positive numbers move to the right, negative numbers represent left 2. Transform:translatey (value); A positive number represents a downward movement, and a negative value moves upwards by 3. Transform:transaltez (values); positive numbers represent moving toward us, negative for moving away. Note: 1.3D displacement is also quite an element of itself. 2.3D displacement can also set a percentage rotation of 1. Transform:rotatex (value deg); 2. Transform:rotatey (value deg); 3. Transform:rotatez (value deg); following the law of the left hand, the axes are also scaled by rotation 1. Transform:scalex (2) 2. Transform:scaley (2)
Perspective:
1. To set the perspective for the parent element;
2. The value of perspective can affect the difference in visual effect. "Value of 600-1000 recommended settings"
Convert to stereo effect:
transform-style:preserve-3d;
The two boxes overlap, the mouse hovers over the top, and a box rotates 45 °.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Title</title> <style>. Box{width:200px;Height:200px;margin:100px Auto;position:relative;Transform-style:preserve-3d; }. Box > Div{width:100%;Height:100%;position:Absolute; }. Box. Front{background:Red; }. box. Back{background:Green; /*Transform:skew (0,0) Rotatex (0deg);*/transition:All 1s linear; }. box. Back:hover{Transform:skew (45deg,0) Rotatex (45deg); } </style></Head><Body> <Divclass= "box"> <Divclass= "Front"></Div> <Divclass= "Back"></Div> </Div></Body></HTML>
CSS3 new Features-transform
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
