Comment CSS3 implémente-t-il la conversion 2D ? Implémentation de transformation 2D (exemple de code)-tutoriel CSS-php.cn

Comment CSS3 implémente-t-il la conversion 2D ? Implémentation de transformation 2D (exemple de code)

青灯夜游

Libérer： 2018-10-27 15:59:43

avant

3019 Les gens l'ont consulté

Le contenu de cet article est de présenter comment implémenter la conversion 2D en CSS3 ? Implémentation de transformation 2D (exemple de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

transform

Se référer au manuel W3

L'attribut transform applique une transformation de la 2D ou de la 3D à un élément. Cette propriété nous permet de faire pivoter, redimensionner, déplacer ou incliner l’élément.

1. Format :

transform: none|transform-functions;

Copier après la connexion

1. >

faire pivoter

transform: rotate(45deg);/*其中deg是单位, 代表多少度*/

Copier après la connexion

traduire

transform: translate(100px, 0px);  /*第一个参数:水平方向第二个参数:垂直方向*/

Copier après la connexion

échelle

transform: scale(1.5);
/*transform: scale(0.5, 0.5);*/

/*
第一个参数:水平方向
第二个参数:垂直方向
注意点:
如果取值是1, 代表不变
如果取值大于1, 代表需要放大
如果取值小于1, 代表需要缩小
如果水平和垂直缩放都一样, 那么可以简写为一个参数
*/

Copier après la connexion

transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);
/*
注意点:
1.如果需要进行多个转换, 那么用空格隔开
2.2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的
*/

Copier après la connexion

transform: rotateZ(45deg);

transform: rotateX(45deg);

transform: rotateY(45deg);

Copier après la connexion

transform-origin

L'attribut transform-origin est utilisé pour changer la position de l'élément transformé

Les éléments de transformation 2D modifient les axes X et Y de l'élément. L'élément de conversion 3D peut également changer son axe Z

1 Format :

transform-origin: left top;

Copier après la connexion

2. Valeur :

<🎜. >

/*具体像素*/
transform-origin: 200px 0px;
/*百分比*/
transform-origin: 50% 50%;
/*特殊关键字*/
transform-origin: left top;

Copier après la connexion

perspective

L'attribut perspective définit la distance de l'élément 3D à la vue, en pixels. Cet attribut permet de changer la vue de l'élément 3D pour visualiser le. Élément 3DLorsque l'attribut perspective est défini pour un élément, ses éléments enfants obtiennent l'effet de perspective, pas l'élément lui-même

Format :

Remarque : l'attribut perspective ne peut affecter que les éléments de conversion 3D

perspective: number|none;
/*
number  元素距离视图的距离，以像素计
none    默认值。与0相同。不设置透视
*/

Copier après la connexion

Pratique de poker de conversion de module 2D

<!DOCTYPE html><html lang="zh-CN"><head>
    <meta charset="UTF-8">
    <title>2D模块转换扑克练习</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        p{
            width: 310px;
            height: 418px;
            border: 1px solid gold;
            margin: 100px auto;
            background-color: #afcced;
            perspective: 400px;
        }
        p img{
            transition: transform 1.2s;
            transform-origin: center bottom;
        }
        p:hover img{
            transform: rotateX(80deg);
        }
    </style></head><body><p>
    <img src="img/pk.png" alt=""></p></body></html>

Copier après la connexion

Exemple complet deux (mur de photos )