The contents of this article is to bring about css code examples to achieve 3d animation effects, there is a certain reference value, a friend in need can refer to, I hope for your help!
First, the animation properties
1.transform-style: flat | preserve-3d animated form
flat: defaults plane, that is, no 3d effect
preserve-3d: 3d effect show
If you want 3D performance, this property must be enabled, of course, pay attention to a variety of attributes you want to add the prefix.
(This property can be a in a two-dimensional div into a 3d space, this property compared to a camera camera, content within this div will be back to you in the form of a camera in the form of 3d, whose sub-elements will enjoy 3d effect, sub-elements of the following elements would not have 3d effects.)
2.transform-origin：50% 50%;
Rotational movement about an axis, the default is the center may be set up left, right, top, bottom, numerical values may be provided, which can adjust the rotational movement about the axis of the finish, such as flip, open the door operation.
(This is equivalent to your glasses you, the effect will be different in different position)
3.perspective perspective
The smaller the value, the closer perspective, the greater the effect
Distance elements to define the view of the 3D transformation attribute, that is, the distance perspective. This property should be added to the view elements (parent element conversion element).
This is an essential attribute 3d animation, if you do not add this attribute, the animation will become a flat-screen effect.
Generally used in stage element is the container, which would allow the container using a perspective animated elements used, this attribute can also be used separately in each element, the natural elements, there is only present their own perspectives style.
4.backface-visibility: hidden is hidden on the back element
Second, to achieve animation
Now I use part of the code that actually elaborate achieve the 3D effect.
1. Flip Card
html
css
effect
2. Cube
html
css
.box{
width: 500px;
height: 500px;
margin: 50px auto;
border: 1px solid;
perspective: 3000px;
perspective-origin: -90% -160%;
}
.box ul{
width: 100px;
height: 100px;
position: relative;
top: 200px;
margin: 0 auto;
transform-style:preserve-3d;
}
.box ul li{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 25px;
color: white;
position: absolute;
background: rgba(225,0,0,0.2);
border: 1px solid black;
transition: all 1s linear;
}
/*上面*/
li:nth-child(1){
transform: translateY(-50px) rotateX(90deg);
}
.box ul:hover li:nth-child(1){
transform: translateY(-100px) rotateX(90deg);
background: palevioletred;
border: 0;
border-radius: 50%;
}
/*后面*/
li:nth-child(2){
transform: translateX(50px) rotateY(90deg);
}
.box ul:hover li:nth-child(2){
transform: translateX(100px) rotateY(90deg);
background: #92ecae;
border: 0;
border-radius: 50%;
}
/*下面*/
li:nth-child(3){
transform: translateY(50px) rotateX(90deg);
}
.box ul:hover li:nth-child(3){
transform: translateY(100px) rotateX(90deg);
background: #ff916a;
border: 0;
border-radius: 50%;
}
/*左面*/
li:nth-child(4){
transform: translateX(-50px) rotateY(90deg);
}
.box ul:hover li:nth-child(4){
transform: translateX(-100px) rotateY(90deg);
background: greenyellow;
border: 0;
border-radius: 50%;
}
/*右面*/
li:nth-child(5){
transform: translateZ(-50px);
}
.box ul:hover li:nth-child(5){
transform: translateZ(-100px);
background: lightskyblue;
border: 0;
border-radius: 50%;
}
/*正面*/
li:nth-child(6){
transform: translateZ(50px);
}
.box ul:hover li:nth-child(6){
transform: translateZ(100px);
background: #be46d8;
border: 0;
border-radius: 50%;
}
.box ul:hover{
transform: rotateX(9000deg) rotateY(5000deg);
transition: all 100s linear;
}effect
3. cuboid
html
css
*{
padding: 0;
margin: 0;
list-style: none;
}
.wutai{
width: 900px;
height: 600px;
border: 1px solid;
margin: 0 auto;
perspective: 1000px;
perspective-origin: 50% 1%;
}
.wutai ul{
width: 100px;
height: 300px;
position: relative;
margin: 0 auto;
top: 150px;
transform-style:preserve-3d;
}
.wutai:hover ul{
transform: rotateY(36000000deg);
transition: all 1000000s linear;
}
.wutai li{
width: 100px;
height: 300px;
position: absolute;
text-align: center;
line-height: 300px;
font-size: 30px;
color: white;
}
li:nth-child(1){
background: rgba(255,0,0,0.6);
transform: rotateY(30deg) translateZ(200px);
}
li:nth-child(2){
background: rgba(0,255,0,0.6);
transform: rotateY(60deg) translateZ(200px);
}
li:nth-child(3){
background: rgba(225,225,0,0.6);
transform: rotateY(90deg) translateZ(200px);
}
li:nth-child(4){
background: rgba(225,0,225,0.6);
transform: rotateY(120deg) translateZ(200px);
}
li:nth-child(5){
background: rgba(0,225,225,0.6);
transform: rotateY(150deg) translateZ(200px);
}
li:nth-child(6){
background: rgba(225,0,0,0.6);
transform: rotateY(180deg) translateZ(200px);
}
li:nth-child(7){
background: rgba(225,0,225,0.6);
transform: rotateY(210deg) translateZ(200px);
}
li:nth-child(8){
background: rgba(0,0,225,0.6);
transform: rotateY(240deg) translateZ(200px);
}
li:nth-child(9){
background: rgba(0,225,225,0.6);
transform: rotateY(270deg) translateZ(200px);
}
li:nth-child(10){
background: rgba(225,225,0,0.6);
transform: rotateY(300deg) translateZ(200px);
}
li:nth-child(11){
background: rgba(225,0,225,0.6);
transform: rotateY(330deg) translateZ(200px);
}
li:nth-child(12){
background: rgba(0,225,225,0.6);
transform: rotateY(360deg) translateZ(200px);
}effect
4. Picture rotation
html
css
effect
summary:
Overall, mainly used in conjunction with each animation properties, distinguish themselves write the main container and animation elements, you can use a timer to help load various class style. The most important is: know your level of animation, clear-eyed deployed to all animation needs.
If you think I'm pretty good article to write, then it concerns the collection Oh!
3D animation more source here, oh friends who are interested can refer to!
https://liyingyingweb.github.io/3d-animation/
We can discuss it with the front-end problem!
rgz987