Home > Developer > Web Develop
Dimensional: Out of the document flow, the average angle, the z axis is the vertical div outward, each push the same distance
1, the role of perspective?
Make the element with 3D effect, have the perspective effect, if there is no perspective, you see only 2-dimensional plane
2, the role of perspective-3d?
Specifies whether the child element appears to be in a 3-dimensional space, or in a 2-dimensional plane
When only perspective, it is easy to produce some strange perspective 3-dimensional plane, that its child elements should be 3-dimensional perspective to this parent element of the plane, but because there is no perspective-3d will be on its flat display, that is, there is a separate 3-dimensional space but the 2-dimensional display is accurate, When only perspective-3d, it will show a completely flat, that is, there is a separate 3-dimensional space, but can not pivot only see 2-dimensional plane
Summary: Up is, perspective-3d makes the child elements have independent 3-dimensional space, and perspective to make it appear
3, why not directly in a container to perspective, and to add one in the middle?
Because the container is changed directly on the rotation of the vessel, because of the change in the angle of view changes will produce different size of visual error, but the large inclusion block perspective, and the container changes will not affect
Properties of CSS transforms:
1, Perspective (Perspective)
Declared on a parent element, acting on a child element
Usage:
perspective:1000px (self-attention compatibility, plus prefix)
Law:
Near big far small, so-called near big far small, also very good understanding, for example your eye is the perspective point, and the perspective attribute stipulation its child element to the distance of your eye, but on the parent element only takes the eye as the pivot point, takes it as the canvas the perspective (does not understand, you can understand as the projection, at least the size is
2, Transfrom
This property has a value that does not enumerate
(1) TranslateX, Y, Z ()
These three elements are used to move the element 3 dimension, the X, Y, Z of the square corresponding to the parallel screen to the right, parallel screen down, and vertical screen outward, when making 3D image Translatez is a very important property
(2) Rotatex, Y, Z ()
These three elements are used to rotate the element 3-dimensional, x, Y, z in the positive direction, respectively, corresponding to the x-axis to the screen, along the Y-axis to the screen, and along the z-axis parallel screen clockwise rotation
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"> <title></title> <Linkrel= "stylesheet"type= "Text/css"href= "1.css"></Head><Body>< SectionID= "Darkred"class= "Container"> <Divclass= "box"></Div></ Section>< SectionID= "Darkblue"class= "Container"> <Divclass= "box"></Div></ Section></Body></HTML>
CSS code:. Container{Display:Block;width:200px;Height:200px;Margin-bottom:50px;Border:1px solid #bbb;}. Box{width:100%;Height:100%;Opacity:. the;}#darkred. Box{Background-color:darkred;Transform:Perspective (600px) Rotatex (45deg);}#darkblue{Perspective:600px;}#darkblue. Box{Background-color:Darkblue;Transform:Rotatey (45deg);}
corresponding to X, y turn 45deg, it is obvious that x, y of the square to a direction, a outward
Usage: Connect directly with a space transform:perspective (600px) Translatez (40px) Rotatex (45deg);
3, Transform-style
(1) perspective-3d
Used to inherit a child element 3d
(2) Flat
Default plane
Firefox support, Chrome, Safari, and opera plus-webkit prefixes
4, Backface-visibility
Rotate do not want to see the back of the element can use this property
Usage: Backface-visibility:hidden;
3D Animation Transformation Thinking
1, the parent element perspective, the child element absolute (makes the picture coincident), respectively rotates the same angle, the addition is 360deg, pushes the same distance in the positive direction to the z axis, the concrete algorithm references
Junior Math, no tan calculator, reference r = 64/math.tan (* math.pi/180)
2, finally set the parent element along the Y axis rotation to animate, OK
CSS3 3D Conversion 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
