2D Conversion of CSS

Scripted CSS
The following CSS to achieve the animation effect, you can use the scripted CSS implementation of sliding into the outline of the extension of the list, that is, dynamic HTML, an outdated version of DHTML

Basic knowledge of some CSS

I've seen a big book before, so just take a look and add a little bit of the unknown

Cascade

The Web browser combines the style property of the element, and then evaluates the styles.

Color transparency and translucency

Color has a translucent color (don't know why the edge is not compatible)

Scripting Inline Styles

div.style.background = "#FFFFFF"

The CSS style is added via JS.

Because-will be JS think there are grammatical errors, so-unified in JS into the Hump naming method to name. It's a habit.

The same can be set directly using properties

e.setAttribute

To set inline styles for CSS

In fact, by increasing the CSS properties of the inline style to achieve the effect. That is, the value of the style

Style weights are larger than any style, so the value of the style created by JS is always working, unless you deliberately change its weight.

2d Conversion of CSS

That is, some CSS conversion

Coordinate

The system that describes the coordinates has a Cartesian coordinate system and homogeneous coordinate systems.

Cartesian coordinate system

Represents a point on a set of planes with a set of values. The coordinates are the right hand rule (on three dimensions)
More Https://en.wikipedia.org/wiki/Cartesian_coordinate_system
The transformation below is based on the Cartesian coordinate system.
The matrix is transformed by means of the point matrix, and the corresponding result is obtained by the linear transformation. For example, multiply transformations, addition transformations, and so on.

Transform

Property will allow you to modify the coordinate space of the CSS visual format model. With it, the elements can be converted (translate), rotated (rotate), scaled (scale), and skewed (skew). Only valid for block-level elements

Origin Point

There are three values, one value is the x-axis, one value is the y-axis, and one value is the z-axis.
As shown

Each value can be set, which is the rotation origin.
The specific value is Transform-origin
If you do not specify an initial value, inheritance will be used directly.

Demonstrate

Https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin

Rotate rotation

This method defines the origin of the element that is deformed by the transform-origin specified element around a fixed point.

Unit angle

A basic data type for CSS. Angle represents the size of the angle, in degrees (degrees) percentile (Gradians) radians (radians) laps (turns)
DEG degree
Grad Percentile (review math, a measure of angle, defined as dividing a circle into 400 equal points, i.e. a right angle equals 10,000 https://zh.wikipedia.org/wiki/%E7%99%BE%E5%88%86%E5%BA%A6)
rad radian (Review math https://zh.wikipedia.org/wiki/%E5%BC%A7%E5%BA%A6)
Number of turn laps

Encyclopedia of Britain Https://www.britannica.com/biography/August-Ferdinand-Mobius

Grammar

There is no space between the number and the unit. The number is 0 o'clock, the unit can be omitted.
Use the + or-numbers to start with a positive number indicating a clockwise angle and a negative number for a counterclockwise angle.

Some examples

90deg = 100grad = 0.25trun≈1.57rad (approximately equal to Π/2)
All of the following representations

A rotation description

Scaling scale

A CSS function scale () is used for scaling. Used to modify the size of an element by scaling values defined in vector form to enlarge and shrink the element. There are two values, a value of SX, and a value of SY, based on two worth of results. If Sy is not set, the value of SY will be set directly with the value of SX. The unit is a number in the CSS data type

This scaling only supports transformations on Euclidean plane (two-dimensional plane)

The value of the CSS set is

transform: scale(2, 2);

At this point, a horizontal axis is completed, and the longitudinal axes are enlarged by one fold.
Similarly, narrowing is also possible.

Tilt Skew

Changes to an original on a skewed two-dimensional plane, with the result being a data type.

Clipping mapping

The tilt of the CSS is the clipping map, and the coordinates of each point are determined by the distance from the specified angle or proportional value to the origin. The matrix is generated for each coordinate, and then the matrix is computed to obtain the coordinate value after the operation.

3d Conversion coordinate coordinate system of CSS

is projected by the Cartesian coordinate system.

1. Any point in the projection plane is represented by a ternary group (x, Y, z), which is called the homogeneous and projected coordinates of a point
2. If the coordinates are multiplied by a common factor, the given set of homogeneous sitting punctuation is constant
3. Conversely, when and only if all coordinates are multiplied by the same non-0 constant, and one is obtained from the other, the two groups of homogeneous coordinates represent the same point
4. When z is not 0 o'clock, the point indicated is Euclid's point.
5. Points that are infinitely distant when Z is 0
   More Https://en.wikipedia.org/wiki/Homogeneous_coordinates

Rotatex ()

Rotate around the x-axis

PS; Set the origin value to center
That

transform-origin:center;

Rotatey () similarly

3d combinations are not exchangeable and can result in different effects if they are exchanged.

2D Conversion of CSS