(Creating is not easy, thank you, your support is the biggest motivation for me to move forward, if it is helpful to you after reading it, please leave your footprints)
Table of contents
Space Transformation – Translation
Stereo rendering – transform-style
Space Transformation – Scaling
Case - Frame by frame animation
Animations – multiple sets of animations
space conversion
Space: The three coordinate axes X, Y and Z defined from the angle of the coordinate axes constitute a three-dimensional space, and the position of the Z axis is the same as the direction of the line of sight.
Space transformation is also called 3D transformation
property: transform
Space Transformation – Translation
Value ( positive or negative ) Percentage
of pixel unit value
(refer to the calculation result of the box's own size )
Tips
By default, Z-axis translation has no effect
Perspective
Function: Specify the distance between the observer and the Z=0 plane, and add perspective effect to the element. Perspective effect
: near large and far small, near real and far virtual Attribute
: (added to parent, value range 800-1200)perspective: line of sight;
space - rotation
transform: rotateZ(value);
transform: rotateX(value);
transform: rotateY(value);Left-hand rule – positive and negative values are determined according to the direction of rotation.
The left hand holds the rotation axis, the thumb points to the positive value direction, and the bending direction of the other four fingers is the positive value direction of the rotation.
Expand
rotate3d(x, y, z, angle degrees) : used to set the position of the custom rotation axis and the angle of rotation
x, y, z are numbers between 0-1
Stereo rendering – transform-style
Role: Set whether the child element of the element is in 3D space or in a plane
Attribute name: transform-style
Attribute value:
flat: the child is in a plane
preserve-3d: the child is in 3D spaceSteps for presenting three-dimensional graphics
1. Add transform-style: preserve-3d to the parent element;
2. Position the child
3. Adjust the position (displacement or rotation) of the child box
Tips
In the space, the transformation elements have their own independent coordinate axes and do not interfere with each other
Space Transformation – Scaling
Attributes
transform: scale3d(x, y, z);
transform: scaleX();
transform: scaleY();
transform: scaleZ();
Case-3D Navigation
<!--
案例 – 3D 导航
1. 搭建立方体
• 绿色是立方体的前面
• 橙色是立方体的上面
2. 添加鼠标悬停的旋转效果
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D导航</title>
<style>
ul
{
margin: 0;
padding: 0;
list-style: none;
}
.nav
{
width: 300px;
height: 40px;
margin: 50px auto;
}
.nav ul
{
display: flex;
}
.nav li
{
position: relative;
width: 100px;
height: 40px;
line-height: 40px;
transition: all .5s;
transform-style: preserve-3d;
}
.nav li a
{
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
text-align: center;
text-decoration: none;
color: #fff;
}
.nav li a:first-child
{
background-color: green;
transform: translateZ(20px);
}
.nav li a:last-child
{
background-color: orange;
transform: rotateX(90deg) translateZ(20px);
}
.nav li:hover
{
transform: rotateX(-90deg);
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="#">首页</a>
<a href="#">Index</a>
</li>
<li>
<a href="#">登录</a>
<a href="#">Login</a>
</li>
<li>
<a href="#">注册</a>
<a href="#">Register</a>
</li>
</ul>
</div>
</body>
</html>animation
Animation - animation
Transition : realize the change process between two states
Animation : realize the change process between multiple states, the animation process is controllable (repeat play, final screen, pause or not)Implementation step
1. Define animation
2. Use animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>动画实现步骤</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: pink;
animation: change 1s;
}
/* 动画一：宽度从200变化到800 */
@keyframes change
{
from
{
width: 200px;
}
to
{
width: 800px;
}
}
/* 动画二：从 200*100 变化到 300*300 变化到800*500 */
@keyframes change
{
0%
{
width: 200px;
height: 100px;
}
20%
{
width: 300px;
height: 300px;
}
100%
{
width: 800px;
height: 500px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
animation property
Tip:
The animation name and animation duration must be assigned
values. The values are not in particular order
. If there are two time values, the first time represents the animation duration, and the second time represents the delay time
Case - Frame by frame animation
Core principles:
1. steps() frame-by-frame animation
2. CSS sprites ( http://t.csdn.cn/tvSjm )Sprite animation production steps
1. Prepare
the box size of the display area to be the same size as a sprite thumbnail
2. Define animation
moving background image (moving distance = sprite width)
3. Use animation
steps(N), N is the same as the number of sprite thumbnails
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div
{
width: 140px;
height: 140px;
background-image: url(./images/bg.png);
animation: run 1s steps(12) infinite;
}
@keyframes run
{
from
{
background-position: 0 0;
}
to
{
background-position: -1680px 0;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>Animations – multiple sets of animations
Take the case-frame-by-frame animation as an example. The frame-by-frame animation realizes running in place, and a set of animations can be added to make it realize real movement
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div
{
width: 140px;
height: 140px;
background-image: url(./images/bg.png);
animation:
run 1s steps(12) infinite,
move 3s forwards
;
}
@keyframes run
{
from
{
background-position: 0 0;
}
to
{
background-position: -1680px 0;
}
}
@keyframes move
{
0%
{
transform: translate(0);
}
100%
{
transform: translate(800px);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>