How to implement 2D conversion in css (example)

The content of this article is about how to achieve 2D conversion (example) in CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Scripted css
The animation effect is achieved through css below. You can use scripted css to achieve sliding in and outline scalable lists, that is, dynamic HTML, an outdated term DHTML

Some basic knowledge of css

I have read a big thick book before, now I will take a brief look at it and add some things I don’t know

Layering

The web browser combines the style attribute of the element and then calculates the style.

Color transparency and translucency

Color has translucent color (not sure why edge is not compatible)

Scripted inline Style

p.style.background = "#FFFFFF"

That is, adding css style through js

Because - will be considered as a grammatical error by js, so - is unified into camel case nomenclature in js. name. This is a habit

Similarly, you can also directly use attributes to set

e.setAttribute

To set the inline style of css

In fact, by adding The inline style of css attributes achieves the effect. That is, the value of style

The weight of style is greater than any style, so the value of style generated with js will always work unless its weight is deliberately changed.

2d conversion of css

That is, perform some css conversion

Coordinates

The system describing coordinates is Cartesian coordinate system and homogeneous coordinate system.

Cartesian coordinate system

Uses a set of numerical values ​​to represent a point on a set of planes. Its coordinates are the right-hand rule (in three dimensions)
More https://en.wikipedia.org/wiki/Cartesian_coordinate_system
The transformation below is based on the Cartesian coordinate system
By using the point The matrix is ​​represented, the matrix is ​​transformed, and the corresponding result is obtained (linear transformation). For example, perform multiplicative transformations, additive transformations, etc. The

transform

property will allow modification of the coordinate space of the CSS visual format model. Using it, elements can be translated, rotated, scaled, and skewed. Only effective for block-level elements

Origin

has three values, one for the x-axis, one for the y-axis, and one for the z-axis.
As shown in the figure below

Each value can be set, this is the origin of rotation
The specific value is transform-origin
If the initial value is not specified, it will be used directly inherit.

Demo

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

rotaterotate

This method defines a way to wrap the element around a fixed point specified by transform-origin as the origin of the element's transformation.

Unit angle

A basic data type of CSS. Angle represents the size of an angle, in units of degrees (degrees), gradians, radians, turns (turns)
deg degrees
grad grads (review math, a unit of measurement for angles) , defined as cutting a circle into 400 equal parts, that is, a right angle is equal to 100 hundredths https://zh.wikipedia.org/wiki/hundredths)
rad radians (review mathematics https:// zh.wikipedia.org/wiki/radians)
turn Number of turns

Syntax

There is no space between the number and the unit. When the number is 0, the unit can be omitted.
Use a sign or - sign at the beginning. Positive numbers represent clockwise angles, and negative numbers represent counterclockwise angles.

Some examples

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

a Rotation instructions

#Scale scale

A css function scale() is used for scaling. Used to modify the size of an element, enlarging and shrinking the element through a scaling value defined in vector form. There are two values, one is sx and the other is sy, and the result is obtained based on the two values. If sy is not set, the value of sy will be set directly with the value of sx. The unit is number in the css data type

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

The set css value is

transform: scale(2, 2);

At this point, an enlargement of twice the horizontal axis and double the vertical axis has been completed.
Similarly, you can also reduce the size.

skew skew

is the change of the original on a skewed two-dimensional plane, and the result is a data type.

剪切映射

css的倾斜为剪切映射,每个点的坐标由与指定角度或成比例的值到原点的距离。对于每个坐标产生矩阵，然后对矩阵进行运算，得出运算后的坐标值。

css的3d转换

坐标

齐次坐标系

由笛卡尔坐标系投影得到。
1. 投影平面中的任何点由三元组（x，y，z）表示，称为点的齐次坐标和投影坐标
2. 如果坐标乘以公因子，则给定的一组齐次坐标点不变
3. 相反，当且仅当通过所有坐标乘以相同的非零常数，从另一个获得一个时，两组齐次坐标表示相同的点
4. 当z不为0时，表示的点为欧几里得的点。
5. 当z为0时表示的点为无穷远处的点

rotateX()

围绕x轴进行旋转

ps；设置的原点值为center
即

transform-origin:center;

rotateY()同理

3d组合不可进行交换，如果进行交换会导致出现不同的效果。

相关推荐：

css3如何实现自定义滚动条样式？（代码）

在页面中怎么用css让图片有立体感的效果?（代码实测）

The above is the detailed content of How to implement 2D conversion in css (example). For more information, please follow other related articles on the PHP Chinese website!