3d conversion-cube-Html5Css3-, cube-html5css3-
(-1) Preface
I used chrome49, which I saw on the Internet. I would like to pay tribute to this colleague. I suggest you add a pen name like me when recording your learning experience, you can leave something for reprinting.
In the study of slice-box.js found that they need 3D conversion knowledge, after understanding the feeling is still almost.
I have not met a web Front-end interview yet, and it is not easy to become an intern. One day has passed!
(0) Case Study(1) knowledge reserve a. perspective: 800px;
It is equivalent to the distance between the lens and the object to be taken.
B. transform-style: preserve-3d;This value allows us to see 3d conversion. The default value is flat, which only shows the plane.
C. x, y, z axisThe left-hand vertical represents the Y axis, the right-hand horizontal represents the X axis, and the Z axis represents the vertical X axis and the vertical Y axis parallel to the ground line.
Clockwise rotation of d. x, y, and Z axesThe clockwise rotation of the Z axis is equivalent to the clockwise rotation of the second-hand clock. We use the index finger to follow the negative direction of the Z axis (pointing to the screen), as long as we change the direction along the axis (pointing to the left side of the negative direction of the X axis, if the Y axis is in the negative direction, you can see the clockwise rotation of the other two axes.
(2) Code
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = UTF-8>
<Title> for life </title>
<Style type = "text/css">
. Stage
{
Perspective: 800px;
}
. Container
{
Width: 150px;
Height: 150px;
Margin: 200px auto;
Position: relative;
Transform-style: preserve-3d;
Height: 200px;
Transition: 1 s;
}
. Container. side
{
Position: absolute;
Width: 150px;
Height: 150px;
Border: 1px solid # 0033FF;
Text-align: center;
Line-height: 150px;
}
. Left
{
Left:-152px;
Transform: translateZ (-75px) rotateY (90deg );
Transform-origin: right;
Background: pink;
}
. Right
{
Left: 152px;
Transform: translateZ (-75px) rotateY (-90deg );
Transform-origin: left;
Background: black;
Background-size: 100% 100%;
}
. Top
{
Top:-152px;
Transform: translateZ (-75px) rotateX (-90deg );
Transform-origin: bottom;
Background: green;
Background-size: 100% 100%;
}
. Bottom
{
Top: 152px;
Transform: translateZ (-75px) rotateX (90deg );
Transform-origin: top;
Background: blue;
Background-size: 100% 100%;
}
. Back
{
Transform: translateZ (-75px );
Background: orange;
Background-size: 100% 100%;
}
. Front
{
Transform: translateZ (75px );
Background: red;
Background-size: 100% 100%;
}
. Container: hover
{
Transform: rotateY (360deg );
}
</Style>
</Head>
<Body>
<Div class = "stage">
<Div class = "container">
<Div class = "side front"> front </div>
<Div class = "side back"> rear </div>
<Div class = "side left"> left </div>
<Div class = "side right"> right </div>
<Div class = "side top"> above </div>
<Div class = "side bottom"> bottom </div>
</Div>
</Div>
</Body>
</Html>
(3) how to build a three-dimensional SquareThe squares of the six faces overlap. Note that when moving by properties such as left and moving by attributes such as translateX are equivalent, they are also unequal, depending on the tansform-origin attribute.
The front moves 75px forward on the Z axis, and the back moves 75px backward on the Z axis.
Left: use the left attribute to move 152px to the left and 75px to backward along the Z axis. transform-origin: right center 0 is the 90deg, right, and 75px to rotate along the Y axis, use the left attribute to move 152px to the right. transform-origin: left center 0 is used to rotate the conversion point-90deg along the Y axis,
Top uses the top attribute to move up by 152px, move 75 PX forward by Z axis, transform-origin: center bottom 0, and rotate the conversion point along the X axis by-90deg. bottom uses the bottom attribute to move down by 152px, transform-origin: center top 0; rotate 90deg along the X axis for the conversion point.
So far, a cube has been built.
(4) how to see the effect of three-dimensional rotationTransition: 1 s; this attribute is placed on the parent element container of six faces. This idea is also applied to layout and control. We rotate the container, and the rotating transformation point is also in this plane, the default value is transform: center 0px. Due to the Cube construction method, the Y axis is located in the middle of the front and back, and in the middle of the left and right!
(5) doubt a. perspective: 800px;Put it in the container and you will see another effect. I guess it is because the positioning point is changed to the container, so the front of the container will be enlarged and the back will be reduced, leading to other changes. But when the backend is rotated to the front, how can the backend size not be changed? Which of the following peers knows how to solve this problem?
B. You can also use the following method to construct a three-dimensional square:. Left {left:-152px; transform: rotateY (90deg); transform-origin: right ;}
. Right {left: 152px; transform: rotateY (-90deg); transform-origin: left ;}
. Top {top:-152px; transform: rotateX (-90deg); transform-origin: bottom ;}
. Bottom {top: 152px; transform: rotateX (90deg); transform-origin: top ;}
. Front {transform: translateZ (152px); z-index: 2 ;}
. Back {z-index: 1 ;}
After setting the background color, rotate it along the X axis. If you rotate it to the bottom, you will see that the other sides are the bottom color.
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
