Home > Developer > JavaScript
Pure CSS Cool 3D Rotation, css Cool 3d
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> pure CSS Cool 3D Rotation </title>
<Style type = "text/css">
. Perspective {
Perspective: 400px;
/* The perspective attribute defines the distance between 3D elements and the view, in pixels. This attribute allows you to change 3D elements to view 3D element views.
When the perspective attribute is defined for an element, its child elements obtain the perspective effect, not the element itself.
Note: The perspective attribute only affects 3D conversion elements. */
Position: relative;/* relative location of relative */
Top: 300px;/* distance from top */
Left: 400px;/* distance from the left */
Width: 300px;/* set the width to 300px */
Height: 300px;/* set the height to 300px */
}
/* Remove the default style of the custom list */
Ul {margin: 0; padding: 0; list-style: none ;}
/* Overlap all li Resources */
. Cube li {
Width: 305px;
Height: 305px;
Position: absolute;
Top: 0; left: 0;
}
/* Set the div style in li, and the div can also be changed to an image */
. Cube div {
Border: 2px black solid;/* solid border red line */
Height: 300px;
Width: 300px;
}
Div {width: 100%; height: 100%}
. Cube {
Width: 300px;
Transform: rotateY (45deg);/* rotate along the Y axis */
Transform-style: preserve-3d;/* transform-style attribute specifies how nested elements are rendered in 3D space. */
Animation: rotate 5S infinite linear;
}
/* Create a Custom Animation */
@ Keyframes rotate {
0% {transform: rotateZ (0deg) rotateX (360deg) rotateY (360deg );}
100% {transform: rotateZ (0deg) rotateX (0deg) rotateY (0deg );}
}
. Front {
Transform: rotateY (0deg) translateZ (150px );
Background: blue;
}
. Back {
Transform: rotateY (180deg) translateZ (150px );
Background: green;
}
. Left {
Transform: rotateY (90deg) translateZ (150px );
Background: yellow;
}
. Right {
Transform: rotateY (-90deg) translateZ (150px );
Background: white;
}
. Top {
Transform: rotateX (90deg) translateZ (150px );
Background: red;
}
. Bottom {
Transform: rotateX (-90deg) translateZ (150px );
Background: orange;
}
</Style>
</Head>
<Body>
<Div class = "perspective">
<Ul class = "cube">
<Li class = "front"> <div> </li>
<Li class = "back"> <div> </li>
<Li class = "left"> <div> </li>
<Li class = "right"> <div> </li>
<Li class = "top"> <div> </li>
<Li class = "bottom"> <div> </li>
</Ul>
</Div>
</Body>
</Html>
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
