Heim > Artikel > Web-Frontend > CSS3-Animation 2D, 3D-Konvertierungsmethode

CSS3-Animation 2D, 3D-Konvertierungsmethode

高洛峰Original: 2017-03-09 18:39:171648Durchsuche

In diesem Artikel wird die Methode der 2D- und 3D-Konvertierung von CSS3-Animationen vorgestellt.

2D- und 3D-Konvertierungscode von CSS3-Animationen:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>css3动画</title>
    <style type="text/css">
        p{width:100px;height:100px;background: rebeccapurple;color:#fff;}
        .p1{
            /*translate:移动(x,y)*/
            transform:translate(100px,100px);
            -webkit-transform: translate(100px,100px);/*safari,chrome*/
            -ms-transform: translate(100px,100px);/*IE*/
            -o-transform:translate(100px,100px);/*opera*/
            -moz-transform: translate(100px,100px);/*firefox*/
        }
        .p2{
            /*rotate:旋转(旋转角度edg)*/
            transform:rotate(100deg);
            -webkit-transform:rotate(100deg);/*safari,chrome*/
        }
        .p3{
            /*scale:缩放(宽，高)*/
            transform:scale(1,2);
            -webkit-transform:scale(1,2);/*safari,chrome*/
        }
        .p4{
            /*skew:倾斜(围绕x轴旋转，围绕y轴旋转)*/
            transform:skew(20deg,20deg);
            -webkit-transform:skew(20deg,20deg);/*safari,chrome*/
        }
        .p5{
            /*matrix矩阵，定义 2D 转换，使用六个值的矩阵
                          定义 3D 转换，使用 16 个值的 4x4 矩阵*/
            transform:matrix(0.586,0.8,-0.8,0.866,0,0);
            -webkit-transform: matrix(0.586,0.8,-0.8,0.866,0,0);
        }

        /*3D转换*/
        .p6{
            /*rotateX:(围绕x轴旋转)*/
            /*rotateY:(围绕y轴旋转)*/
            transform:rotateX(120deg);
            -webkit-transform:rotateX(120deg);/*safari,chrome*/
        }
    </style></head><body><p>这个是测试1</p><br/><p class="p1">这个是测试2</p><br/><p class="p2">这个是测试2</p><br/><p class="p3">这个是测试2</p><br/><p class="p4">这个是测试2</p><br/><p class="p5">这个是测试2</p><br/><p class="p6">这个是测试2</p><br/></body></html>

Das obige ist der detaillierte Inhalt vonCSS3-Animation 2D, 3D-Konvertierungsmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：CSS3-Beispielcode für mehrspaltige und WasserfalleffekteNächster Artikel：CSS3-Beispielcode für mehrspaltige und Wasserfalleffekte

In Verbindung stehende Artikel

Mehr sehen