CSS 3d animation related

transform-style:preserve-3d; Set 3D mode

The perspective:700px 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

perspective-origin:50% 50%; property defines the X-and Y-axes on which the 3D element is based. This property allows you to change the bottom position of the 3D element. When you define a Perspective-origin property for an element, its child elements get a perspective instead of the element itself.

Set animation
@keyframes Mymove
{0%   {top:0px;} 25%  {top:200px;} 50%  {top:100px;} 75%  {top:200px;} 100% {top:0px;}}

Div
{
width:100px;
height:100px;
background:red;
position:relative;
Animation:mymove  binding the animation time set above the  infinite rules that the animation should be played in an infinite number of times
-moz-animation:mymove 5s Infinite; /* Firefox */
-webkit-animation:mymove 5s Infinite; /* Safari and Chrome */
-o-animation:mymove 5s Infinite; /* Opera */
}

Animation-timing-function uses a mathematical function called a three-time Bezier (Cubic Bézier) function to generate a velocity curve. You can use your own values in the function or predefined values:

value	Description	Test
Linear	The animation is the same speed from beginning to end.	Test
Ease	Default. The animation starts at low speed, then accelerates and slows down before it ends.	Test
Ease-in	The animation starts at low speed.	Test
Ease-out	The animation ends at low speed.	Test
Ease-in-out	Animations start and end at low speed.	Test
Cubic-bezier (n,n,n,n)	Its own value in the Cubic-bezier function. The possible values are numbers from 0 to 1.

CSS 3d animation related