Home > Developer > Web Develop
No unnecessary elements, no redundant code, a simple transform mobile easy to implement the elements in the horizontal vertical center of the page, CSS3 really is a need to explore the things, and good memory than bad writing ...
Well, English study time to: transform, transform, change the meaning, in CSS3 it can let the element change position (translate), change the rotation angle (rotate), change the size ratio (scale ), the element skew distortion (skew), and the matrix deformation of the element(matrix), transform can not only 2D conversion , but also 3D conversion , This is what Photoshop can do, ah, too good to have wood!
Learn a transform, know more than 6 words, feel great ~
To demonstrate these effects, simply make an HTML page:
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Document</title>6 <style>7 . Wrap{8 width:500px;9 Height:200px;Ten margin:100px Auto; One background:#bbb; A Border:1px solid #aaa; - } - . Box{ the width:100px; - Height:100px; - margin:50px Auto; - Border:2px solid #000; + } - . Demo{ + width:100px; A Height:100px; at background:#eee; - } - </style> - </Head> - <Body> - <Divclass= "Wrap"> in <Divclass= "box"> - <Divclass= "Demo"></Div> to </Div> + </Div> - </Body> the </HTML>
The page preview works as follows:
Since a contact is translate, I'll look at it first:
1, Transform Mobile: Translate1-1 2D MobileTranslateX (x): Moves horizontally at the x-axisAdd Style to Demo
1 . Demo {2 width:100px; 3 height:100px; 4 background:#eee; 5 transform:TranslateX (50px); 6 }You can see that it moves to the right 50px:
Translatey (y): moves horizontally on the y-axisAlso try the y-axis again:
1 . Demo {2 width:100px; 3 height:100px; 4 background:#eee; 5 transform:translatey (50px); 6 }You can see that it moved down by 50px:
translate (x, y): Move horizontally in the X, Y axis, fill only one value, defaultIf you want to move the 100px,y axis in the x-axis 20px, do not write two times, direct translate (100px,20px) can be:
1 . Demo {2 width:100px; 3 height:100px; 4 background:#eee; 5 transform:translate (100px,20px); 6 }Look at the effect:
1-2 3D MobileTranslatez (z): Moving in the z axis, i.e. moving back and forthJust looked at the horizontal movement, and now try 3D, give it the z-axis add a try:
1 . Demo {2 width:100px; 3 height:100px; 4 background:#eee; 5 transform:Translatez (100px); 6 }Still in the original position, nothing has changed, this is why?
Our page it is flat, if you want to see a 3D effect, you need to make its parent into 3D view mode (transform-style:preserve-3d), and then set its depth of field (perspective), The value of this is to assume that I look at it far away. I'll introduce you later. ~ But remember, to make a 3D conversion, the parent must be set to transform-style:preserve-3dand set its perspective.
Translate3d (x, Y, z): 3D displacement, wait and see.Of course, the value in the translate can be either hundred percent or negative. Of course, the value in the translate can be either hundred percent or negative.
2, transform rotation: Rotate2-1 2D RotationRotate (angle)
2-2 3D RotationRotatex (angle)
Rotatey (angle)
Rotatez (angle)
Rotate3d (X,y,z,angle)
3, Transform scaling: Scale3-1 2D ZoomScaleX (y)
ScaleY (y)
Scale (x, y)
3-2 3D ZoomScalez (z)
Scale3d (x, Y, z)
4, Transform tilt twist: Skew4-1 2D TiltSkew
4-2 3D Tilt5. Transform matrices: matrix5-1 2DMatrix (N,n,n,n,n,n)
5-2 3DMatrix3D (N,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
Css3:transform in-depth learning
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
