Home > Developer > Web Develop
Effect:
HTML section:
<body class= "body" >
<div class= "rect-wrap" > <!--// stage elements, Set the perspective, and let its child elements get perspective Effects. -
<div class= "container" > <!--// container, set transform-style:preserve-3d, let its child elements in 3D Space Rendering -
<div class= "top slide" >1</div> <!--// six-face cube
<div class= "bottom slide" >2</div>
<div class= "left slide" >3</div>
<div class= "right slide" >4</div>
<div class= "front slide" >5</div>
<div class= "back slide" >6</div>
</div>
</div>
</body>
Css:
<style>
. rect-wrap {
position:relative;
perspective:2000px;
}
. container {
width:400px;
height:400px;
transform-style:preserve-3d;
transform-origin:50% 50% 100px; /*//set The origin of the 3d space in the center of the plane and move the 200px position to the z-axis */
/* left:50%;
Margin-left: -200px; */
top:100px;
}
. Slide {
width:200px;
height:200px;
position:absolute;
Background: #000;
line-height:200px;
text-align:center;
Color: #fff;
font-size:30px;
font-weight:bold;
}
. Top {
left:100px;
Top: -100px;
Transform:rotatex ( -90deg);
transform-origin:bottom;
background:red;
}
. Bottom {
left:100px;
Bottom: -100px;
Transform:rotatex (90deg);
transform-origin:top;
background:grey;
}
. Left {
Left: -100px;
bottom:100px;
Transform:rotatey (90deg);
transform-origin:right;
background:green;
}
. Right {
left:300px;
bottom:100px;
Transform:rotatey ( -90deg);
transform-origin:left;
background:yellow;
}
. Front {
left:100px;
top:100px;
Transform:translatez (200px);
background:black;
}
. back {
left:100px;
top:100px;
Transform:translatez (0);;
background:blue;
}
@keyframes Rotate-frame {
0% {
Transform:rotatex (0deg) Rotatey (0deg);
}
10% {
Transform:rotatex (0deg) Rotatey (180deg);
}
20% {
Transform:rotatex ( -180deg) Rotatey (180deg);
}
30% {
Transform:rotatex ( -360deg) Rotatey (180deg);
}
40% {
Transform:rotatex ( -360deg) Rotatey (360deg);
}
50% {
Transform:rotatex ( -180deg) Rotatey (360deg);
}
60% {
Transform:rotatex (90deg) Rotatey (180deg);
}
70% {
Transform:rotatex (0) Rotatey (180deg);
}
80% {
Transform:rotatex (90deg) Rotatey (90deg);
}
90% {
Transform:rotatex (90deg) Rotatey (0);
}
100% {
Transform:rotatex (0) Rotatey (0);
}
}
. container{
Animation:rotate-frame 30s Linear infinite;
}
</style>
1.3-dimensional Space Map
the Center of the computer screen is the origin and the landscape is x-axis, vertical y-axis, The face of the direction of the z-axis;
Translate (x, y), translateX (x), translatey (y), translatez (z), translate3d (x, z): define the moving distance of the position
Rotate (angle), rotatex (a), rotatey (a), rotatez (a), rotate3d (x,y,z,angle): defines the rotation angle of the Element.
2.perspective Properties
The Perspective property defines the distance, in pixels, of the 3D element from the VIEW. This property allows you to change the 3D element view of the 3D Element.
When you define a perspective property for an element , its child elements get a perspective instead of the element itself.
Note:The Perspective property only affects 3D conversion elements.
tip: Use this property with the Perspective-origin property so you can change the bottom position of the 3D Element.
3.transform-style Property
transform-style:flat|preserve-3d; The default value is flat, which indicates that child elements are rendered in a 2D plane; perserve-3d represents a child element rendered in a planar plane
4.transform-origin Property
The Transform-origin property allows you to change the position of the element being converted (which can be understood as where the element is rotated origin).
Grammar:
Transform-origin:x-axis Y-axis z-axis;
has a large number of front Development Tools and Learning materials, You can search groups "Web front-end Learning Tribe 22 Group " to download, encounter learning problems can also ask the Group of experts and course teachers yo
Cube Rotation "web Front End Learning Tribe 22 Group 120342833"
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
