3d conversion

3d conversion
3d horizon
perspective: 1000px;
increase in body: all of the following sub-elements, to form a unified sense of perspective;
applied to the respective father: Management following sub-elements form a respective sense perspective;
the smaller the value, the more dramatic changes;
3d displacement
Transform: the translateX (200px);
Transform: translateY, (100%);
provided that the percentage of moving itself what percentage
Transform: translateZ (100px);
the Z-axis thickness is not provided does not take effect%
short
transform: translate3d (100px, 100px, 100px);
3D rendering
transform-style: preserve-3d;
parent element control sub-element is turned three-dimensional environment that allows child elements do 3D conversion can be effective;
as long as the natural child elements do 3D conversion, you need to on their father plus 3D rendering, with such elements do 3D conversion can be seen
in his father plus 3d rendering
biological child elements do 3D conversion, can be presented
horizon
near the far smaller, a sense of perspective;
body all the sub-elements, their father; different observation angles;
3D rendering
offspring 3D conversion element, can be presented
plus the father;
3D rotation
Transform: rotateX (45deg);
Transform: rotateY (45deg);
Transform: rotateZ (45deg);
custom axis
transform: rotate3d (1, 1, 0, 45deg);
hand tools
left thumb points in the positive direction of an axis;
the remaining fingers bent direction is the direction of rotation of the element around an axis is positive clockwise
think how easily observed rotation, it is necessary axially directed your eyes.
3d scaling
Transform: the scaleX (2);
Transform: scaleY (0.5);
the Z-axis direction without thickness, does not take effect
transform: scaleZ (10000);
abbreviated
Transform: Scale3D (2, 2, 10000000);
3D scaling, relative to their width high thickness, Z-axis scale is not effective, because there is no thickness;
the following sub-elements, text, will follow the scaling properties provided CSS;
3D shorthand
transform: translateY () rotateX () ;
Note: changing the axial rotation of, writing the code will affect ;