Comment implémenter la conversion 2D en CSS (exemple)

Le contenu de cet article explique comment réaliser une conversion 2D (exemple) en CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

CSS scripté
L'effet d'animation est obtenu grâce au CSS ci-dessous. Vous pouvez utiliser du CSS scripté pour réaliser des listes évolutives coulissantes et décrites, c'est-à-dire du HTML dynamique, un terme obsolète DHTML

Quelques connaissances de base en CSS

J'ai déjà lu un livre épais, maintenant je vais le lire brièvement et ajouter quelques choses que je ne connais pas

Superposition

Le navigateur Web combine l'attribut de style de l'élément puis calcule le style.

Transparence et translucidité des couleurs

La couleur est translucide (je ne sais pas pourquoi les bords ne sont pas compatibles)

Style en ligne scripté

p.style.background = "#FFFFFF"

consiste à compléter l'ajout du style CSS via js

Puisque - sera considéré comme une erreur grammaticale par js, donc - est unifié dans la dénomination des cas de chameaux dans la méthode js pour nommer. C'est une habitude

De même, vous pouvez également utiliser des attributs directement pour définir

e.setAttribute

pour définir le style en ligne du CSS

En fait , L'effet est obtenu en ajoutant des styles en ligne d'attributs CSS. Autrement dit, la valeur de style

Le poids de style est supérieur à n'importe quel style, donc la valeur de style générée avec js fonctionnera toujours à moins que son poids ne soit délibérément modifié.

Conversion 2D de CSS

C'est-à-dire effectuer une conversion CSS

Coordonnées

Le système décrivant les coordonnées est Système de coordonnées cartésiennes et système de coordonnées homogènes.

Système de coordonnées cartésiennes

Utilise un ensemble de valeurs numériques pour représenter un point sur un ensemble de plans. Ses coordonnées sont la règle de droite (en trois dimensions)
En savoir plus https://en.wikipedia.org/wiki/Cartesian_coordina_system
La transformation ci-dessous est basée sur le système de coordonnées cartésiennes
En utilisant le point La matrice est représentée, la matrice est transformée et le résultat correspondant est obtenu (transformation linéaire). Par exemple, effectuez des transformations multiplicatives, des transformations additives, etc. L'attribut

transform

permettra de modifier l'espace de coordonnées du modèle de formatage visuel CSS. Grâce à lui, les éléments peuvent être traduits, pivotés, mis à l'échelle et inclinés. Efficace uniquement pour les éléments au niveau du bloc

L'origine

a trois valeurs, une pour l'axe des x, une pour l'axe des y et une pour l'axe des z.
Comme le montre la figure ci-dessous

Chaque valeur peut être définie, c'est l'origine de la rotation
La valeur spécifique est l'origine de la transformation
Si la valeur initiale n'est pas spécifiée , il sera utilisé directement pour hériter.

Démo

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

rotation rotation

Cette méthode définit un moyen d'enrouler l'élément autour d'un point fixe spécifié par transform-origin comme origine de la transformation de l'élément.

Angle unitaire

Un type de données de base de CSS. L'angle représente la taille d'un angle, en unités de degrés (degrés), grades, radians, tours (tours)
degrés
grads (réviser les mathématiques, une unité de mesure pour les angles, définie comme la coupe d'un cercle en 400 parties égales, c'est-à-dire qu'un angle droit est égal à 100 degrés https://zh.wikipedia.org/wiki/%E7%99%BE%E5%88%86%E5%BA% A6)
rad radians (revoir les mathématiques https://zh.wikipedia.org/wiki/%E5%BC%A7%E5%BA%A6)
tourner le nombre de cercles

Grammaire

Il y a pas d'espace entre le numéro et l'unité. Lorsque le nombre est 0, l'unité peut être omise.
Utilisez un signe + ou - au début. Les nombres positifs représentent les angles dans le sens des aiguilles d'une montre et les nombres négatifs représentent les angles dans le sens inverse des aiguilles d'une montre.

Quelques exemples

90deg = 100grad = 0,25trun ≈ 1,57rad (environ égal à π/2)
Toutes les expressions suivantes

Une description de la rotation

Échelle d'échelle

Une fonction CSS scale() est utilisée pour la mise à l'échelle. Utilisé pour modifier la taille d'un élément, en agrandissant et en réduisant l'élément via une valeur d'échelle définie sous forme vectorielle. Il existe deux valeurs, l'une est sx et l'autre sy, et le résultat est obtenu sur la base des deux valeurs. Si sy n'est pas défini, la valeur de sy sera définie directement avec la valeur de sx. L'unité est un nombre dans le type de données CSS

Cette mise à l'échelle ne prend en charge que la transformation sur le plan euclidien (plan bidimensionnel)

La valeur CSS définie est

transform: scale(2, 2);

À ce stade, un élargissement de deux fois l'axe horizontal et du double de l'axe vertical est effectué.
De même, vous pouvez également réduire la taille.

skew skew

est le changement de l'original sur un plan bidimensionnel asymétrique, et le résultat est un type de données.

剪切映射

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让图片有立体感的效果?（代码实测）

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!