使用CSS3矩阵变换（transform:matrix）实现的圆周运动

Circular motion using CSS3 Matrix 用来学习matrix变换的基本用法。

css3, transform

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3983
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html,
body {
    padding: 0;
    margin: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
}
html {
    background: -webkit-linear-gradient(top, #92d1c4 0%, #c9dcbc 100%);
    background: linear-gradient(to bottom, #92d1c4 0%, #c9dcbc 100%);
}
span {
    position: absolute;
    border: solid 1px rgba(255, 255, 175, 0.5);
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0);
    border-radius: 50px;
    left: 50%;
    top: 50%;
    margin-top: -25px;
    margin-left: -25px;
}
figure {
    position: absolute;
    margin: 0;
    border: solid 1px rgba(255, 255, 175, 0.7);
    width: 200px;
    height: 200px;
    background-color: rgba(238, 238, 238, 0);
    border-radius: 200px;
    left: 50%;
    top: 50%;
    margin-top: -100px;
    margin-left: -100px;
}
figure::before {
    position: absolute;
    content: '';
    left: 75px;
    top: 75px;
    width: 50px;
    height: 50px;
    background-color: rgba(227, 75, 48, 0.7);
    border-radius: 50px;
    -webkit-transform: matrix(1, 0, 0, 1, 0, 100);
    transform: matrix(1, 0, 0, 1, 0, 100);
    -webkit-animation-name: matrix-circular-rotation;
    animation-name: matrix-circular-rotation;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    animation-direction: normal;
}
figure::after {
    position: absolute;
    content: '';
    left: 75px;
    top: 75px;
    width: 50px;
    height: 50px;
    background-color: rgba(121, 166, 159, 0.7);
    border-radius: 50px;
    -webkit-transform: matrix(1, 0, 0, 1, 0, 100);
    transform: matrix(1, 0, 0, 1, 0, 100);
    -webkit-animation-name: matrix-circular-rotation-reserve;
    animation-name: matrix-circular-rotation-reserve;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    animation-direction: normal;
}
@-webkit-keyframes matrix-circular-rotation {
    1% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 100);
        transform: matrix(1, 0, 0, 1, 0, 100);
    }
    2% {
        -webkit-transform: matrix(1, 0, 0, 1, 9.98334, 99.50042);
        transform: matrix(1, 0, 0, 1, 9.98334, 99.50042);
    }
    3% {
        -webkit-transform: matrix(1, 0, 0, 1, 19.89772, 98.00041);
        transform: matrix(1, 0, 0, 1, 19.89772, 98.00041);
    }
    4% {
        -webkit-transform: matrix(1, 0, 0, 1, 29.61213, 95.51503);
        transform: matrix(1, 0, 0, 1, 29.61213, 95.51503);
    }
    5% {
        -webkit-transform: matrix(1, 0, 0, 1, 39.02881, 92.06928);
        transform: matrix(1, 0, 0, 1, 39.02881, 92.06928);
    }
    6% {
        -webkit-transform: matrix(1, 0, 0, 1, 48.05306, 87.6978);
        transform: matrix(1, 0, 0, 1, 48.05306, 87.6978);
    }
    7% {
        -webkit-transform: matrix(1, 0, 0, 1, 56.59415, 82.44454);
        transform: matrix(1, 0, 0, 1, 56.59415, 82.44454);
    }
    8% {
        -webkit-transform: matrix(1, 0, 0, 1, 64.5662, 76.36233);
        transform: matrix(1, 0, 0, 1, 64.5662, 76.36233);
    }
    9% {
        -webkit-transform: matrix(1, 0, 0, 1, 71.88906, 69.51232);
        transform: matrix(1, 0, 0, 1, 71.88906, 69.51232);
    }
    10% {
        -webkit-transform: matrix(1, 0, 0, 1, 78.4891, 61.96339);
        transform: matrix(1, 0, 0, 1, 78.4891, 61.96339);
    }
    11% {
        -webkit-transform: matrix(1, 0, 0, 1, 84.29995, 53.79143);
        transform: matrix(1, 0, 0, 1, 84.29995, 53.79143);
    }
    12% {
        -webkit-transform: matrix(1, 0, 0, 1, 89.2632, 45.07861);
        transform: matrix(1, 0, 0, 1, 89.2632, 45.07861);
    }
    13% {
        -webkit-transform: matrix(1, 0, 0, 1, 93.32893, 35.91255);
        transform: matrix(1, 0, 0, 1, 93.32893, 35.91255);
    }
    14% {
        -webkit-transform: matrix(1, 0, 0, 1, 96.45627, 26.38539);
        transform: matrix(1, 0, 0, 1, 96.45627, 26.38539);
    }
    15% {
        -webkit-transform: matrix(1, 0, 0, 1, 98.61376, 16.59294);
        transform: matrix(1, 0, 0, 1, 98.61376, 16.59294);
    }
    16% {
        -webkit-transform: matrix(1, 0, 0, 1, 99.77973, 6.63365);
        transform: matrix(1, 0, 0, 1, 99.77973, 6.63365);
    }
    17% {
        -webkit-transform: matrix(1, 0, 0, 1, 99.94244, -3.39234);
        transform: matrix(1, 0, 0, 1, 99.94244, -3.39234);
    }
    18% {
        -webkit-transform: matrix(1, 0, 0, 1, 99.10027, -13.38422);
        transform: matrix(1, 0, 0, 1, 99.10027, -13.38422);
    }
    19% {
        -webkit-transform: matrix(1, 0, 0, 1, 97.26166, -23.24153);
        transform: matrix(1, 0, 0, 1, 97.26166, -23.24153);
    }
    20% {
        -webkit-transform: matrix(1, 0, 0, 1, 94.44513, -32.86515);
        transform: matrix(1, 0, 0, 1, 94.44513, -32.86515);
    }
    21% {
        -webkit-transform: matrix(1, 0, 0, 1, 90.67897, -42.15832);
        transform: matrix(1, 0, 0, 1, 90.67897, -42.15832);
    }
    22% {
        -webkit-transform: matrix(1, 0, 0, 1, 86.00107, -51.0276);
        transform: matrix(1, 0, 0, 1, 86.00107, -51.0276);
    }
    23% {
        -webkit-transform: matrix(1, 0, 0, 1, 80.45845, -59.38381);
        transform: matrix(1, 0, 0, 1, 80.45845, -59.38381);
    }
    24% {
        -webkit-transform: matrix(1, 0, 0, 1, 74.10685, -67.14294);
        transform: matrix(1, 0, 0, 1, 74.10685, -67.14294);
    }
    25% {
        -webkit-transform: matrix(1, 0, 0, 1, 67.01013, -74.22697);
        transform: matrix(1, 0, 0, 1, 67.01013, -74.22697);
    }
    26% {
        -webkit-transform: matrix(1, 0, 0, 1, 59.23964, -80.56467);
        transform: matrix(1, 0, 0, 1, 59.23964, -80.56467);
    }
    27% {
        -webkit-transform: matrix(1, 0, 0, 1, 50.87351, -86.09231);
        transform: matrix(1, 0, 0, 1, 50.87351, -86.09231);
    }
    28% {
        -webkit-transform: matrix(1, 0, 0, 1, 41.99587, -90.75432);
        transform: matrix(1, 0, 0, 1, 41.99587, -90.75432);
    }
    29% {
        -webkit-transform: matrix(1, 0, 0, 1, 32.69597, -94.50383);
        transform: matrix(1, 0, 0, 1, 32.69597, -94.50383);
    }
    30% {
        -webkit-transform: matrix(1, 0, 0, 1, 23.06732, -97.30313);
        transform: matrix(1, 0, 0, 1, 23.06732, -97.30313);
    }
    31% {
        -webkit-transform: matrix(1, 0, 0, 1, 13.20674, -99.12407);
        transform: matrix(1, 0, 0, 1, 13.20674, -99.12407);
    }
    32% {
        -webkit-transform: matrix(1, 0, 0, 1, 3.21336, -99.94836);
        transform: matrix(1, 0, 0, 1, 3.21336, -99.94836);
    }
    33% {
        -webkit-transform: matrix(1, 0, 0, 1, -6.81232, -99.76769);
        transform: matrix(1, 0, 0, 1, -6.81232, -99.76769);
    }
    34% {
        -webkit-transform: matrix(1, 0, 0, 1, -16.7695, -98.58389);
        transform: matrix(1, 0, 0, 1, -16.7695, -98.58389);
    }
    35% {
        -webkit-transform: matrix(1, 0, 0, 1, -26.55808, -96.40886);
        transform: matrix(1, 0, 0, 1, -26.55808, -96.40886);
    }
    36% {
        -webkit-transform: matrix(1, 0, 0, 1, -36.07962, -93.26447);
        transform: matrix(1, 0, 0, 1, -36.07962, -93.26447);
    }
    37% {
        -webkit-transform: matrix(1, 0, 0, 1, -45.23839, -89.18233);
        transform: matrix(1, 0, 0, 1, -45.23839, -89.18233);
    }
    38% {
        -webkit-transform: matrix(1, 0, 0, 1, -53.9423, -84.20349);
        transform: matrix(1, 0, 0, 1, -53.9423, -84.20349);
    }
    39% {
        -webkit-transform: matrix(1, 0, 0, 1, -62.10384, -78.37801);
        transform: matrix(1, 0, 0, 1, -62.10384, -78.37801);
    }
    40% {
        -webkit-transform: matrix(1, 0, 0, 1, -69.64094, -71.76447);
        transform: matrix(1, 0, 0, 1, -69.64094, -71.76447);
    }
    41% {
        -webkit-transform: matrix(1, 0, 0, 1, -76.47783, -64.42935);
        transform: matrix(1, 0, 0, 1, -76.47783, -64.42935);
    }
    42% {
        -webkit-transform: matrix(1, 0, 0, 1, -82.54576, -56.44642);
        transform: matrix(1, 0, 0, 1, -82.54576, -56.44642);
    }
    43% {
        -webkit-transform: matrix(1, 0, 0, 1, -87.78371, -47.89593);
        transform: matrix(1, 0, 0, 1, -87.78371, -47.89593);
    }
    44% {
        -webkit-transform: matrix(1, 0, 0, 1, -92.13902, -38.86387);
        transform: matrix(1, 0, 0, 1, -92.13902, -38.86387);
    }
    45% {
        -webkit-transform: matrix(1, 0, 0, 1, -95.56791, -29.44104);
        transform: matrix(1, 0, 0, 1, -95.56791, -29.44104);
    }
    46% {
        -webkit-transform: matrix(1, 0, 0, 1, -98.03589, -19.7222);
        transform: matrix(1, 0, 0, 1, -98.03589, -19.7222);
    }
    47% {
        -webkit-transform: matrix(1, 0, 0, 1, -99.51814, -9.80505);
        transform: matrix(1, 0, 0, 1, -99.51814, -9.80505);
    }
    48% {
        -webkit-transform: matrix(1, 0, 0, 1, -99.99978, 0.21069);
        transform: matrix(1, 0, 0, 1, -99.99978, 0.21069);
    }
    49% {
        -webkit-transform: matrix(1, 0, 0, 1, -99.47594, 10.22431);
        transform: matrix(1, 0, 0, 1, -99.47594, 10.22431);
    }
    50% {
        -webkit-transform: matrix(1, 0, 0, 1, -97.95191, 20.13512);
        transform: matrix(1, 0, 0, 1, -97.95191, 20.13512);
    }
    51% {
        -webkit-transform: matrix(1, 0, 0, 1, -95.443, 29.84348);
        transform: matrix(1, 0, 0, 1, -95.443, 29.84348);
    }
    52% {
        -webkit-transform: matrix(1, 0, 0, 1, -91.97444, 39.25178);
        transform: matrix(1, 0, 0, 1, -91.97444, 39.25178);
    }
    53% {
        -webkit-transform: matrix(1, 0, 0, 1, -87.58111, 48.26541);
        transform: matrix(1, 0, 0, 1, -87.58111, 48.26541);
    }
    54% {
        -webkit-transform: matrix(1, 0, 0, 1, -82.30717, 56.79375);
        transform: matrix(1, 0, 0, 1, -82.30717, 56.79375);
    }
    55% {
        -webkit-transform: matrix(1, 0, 0, 1, -76.20566, 64.75104);
        transform: matrix(1, 0, 0, 1, -76.20566, 64.75104);
    }
    56% {
        -webkit-transform: matrix(1, 0, 0, 1, -69.33793, 72.05728);
        transform: matrix(1, 0, 0, 1, -69.33793, 72.05728);
    }
    57% {
        -webkit-transform: matrix(1, 0, 0, 1, -61.77302, 78.63901);
        transform: matrix(1, 0, 0, 1, -61.77302, 78.63901);
    }
}
@keyframes matrix-circular-rotation {
    1% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 100);
        transform: matrix(1, 0, 0, 1, 0, 100);
    }
    2% {
        -webkit-transform: matrix(1, 0, 0, 1, 9.98334, 99.50042);
        transform: matrix(1, 0, 0, 1, 9.98334, 99.50042);
    }
    3% {
        -webkit-transform: matrix(1, 0, 0, 1, 19.89772, 98.00041);
        transform: matrix(1, 0, 0, 1, 19.89772, 98.00041);
    }
    4% {
        -webkit-transform: matrix(1, 0, 0, 1, 29.61213, 95.51503);
        transform: matrix(1, 0, 0, 1, 29.61213, 95.51503);
    }
    5% {
        -webkit-transform: matrix(1, 0, 0, 1, 39.02881, 92.06928);
        transform: matrix(1, 0, 0, 1, 39.02881, 92.06928);
    }
    6% {
        -webkit-transform: matrix(1, 0, 0, 1, 48.05306, 87.6978);
        transform: matrix(1, 0, 0, 1, 48.05306, 87.6978);
    }
    7% {
        -webkit-transform: matrix(1, 0, 0, 1, 56.59415, 82.44454);
        transform: matrix(1, 0, 0, 1, 56.59415, 82.44454);
    }
    8% {
        -webkit-transform: matrix(1, 0, 0, 1, 64.5662, 76.36233);
        transform: matrix(1, 0, 0, 1, 64.5662, 76.36233);
    }
    9% {
        -webkit-transform: matrix(1, 0, 0, 1, 71.88906, 69.51232);
        transform: matrix(1, 0, 0, 1, 71.88906, 69.51232);
    }
    10% {
        -webkit-transform: matrix(1, 0, 0, 1, 78.4891, 61.96339);
        transform: matrix(1, 0, 0, 1, 78.4891, 61.96339);
    }
    11% {
        -webkit-transform: matrix(1, 0, 0, 1, 84.29995, 53.79143);
        transform: matrix(1, 0, 0, 1, 84.29995, 53.79143);
    }
    12% {
        -webkit-transform: matrix(1, 0, 0, 1, 89.2632, 45.07861);
        transform: matrix(1, 0, 0, 1, 89.2632, 45.07861);
    }
    13% {
        -webkit-transform: matrix(1, 0, 0, 1, 93.32893, 35.91255);
        transform: matrix(1, 0, 0, 1, 93.32893, 35.91255);
    }
    14% {
        -webkit-transform: matrix(1, 0, 0, 1, 96.45627, 26.38539);
        transform: matrix(1, 0, 0, 1, 96.45627, 26.38539);
    }
    15% {
        -webkit-transform: matrix(1, 0, 0, 1, 98.61376, 16.59294);
        transform: matrix(1, 0, 0, 1, 98.61376, 16.59294);
    }
    16% {
        -webkit-transform: matrix(1, 0, 0, 1, 99.77973, 6.63365);
        transform: matrix(1, 0, 0, 1, 99.77973, 6.63365);
    }
    17% {
        -webkit-transform: matrix(1, 0, 0, 1, 99.94244, -3.39234);
        transform: matrix(1, 0, 0, 1, 99.94244, -3.39234);
    }
    18% {
        -webkit-transform: matrix(1, 0, 0, 1, 99.10027, -13.38422);
        transform: matrix(1, 0, 0, 1, 99.10027, -13.38422);
    }
    19% {
        -webkit-transform: matrix(1, 0, 0, 1, 97.26166, -23.24153);
        transform: matrix(1, 0, 0, 1, 97.26166, -23.24153);
    }
    20% {
        -webkit-transform: matrix(1, 0, 0, 1, 94.44513, -32.86515);
        transform: matrix(1, 0, 0, 1, 94.44513, -32.86515);
    }
    21% {
        -webkit-transform: matrix(1, 0, 0, 1, 90.67897, -42.15832);
        transform: matrix(1, 0, 0, 1, 90.67897, -42.15832);
    }
    22% {
        -webkit-transform: matrix(1, 0, 0, 1, 86.00107, -51.0276);
        transform: matrix(1, 0, 0, 1, 86.00107, -51.0276);
    }
    23% {
        -webkit-transform: matrix(1, 0, 0, 1, 80.45845, -59.38381);
        transform: matrix(1, 0, 0, 1, 80.45845, -59.38381);
    }
    24% {
        -webkit-transform: matrix(1, 0, 0, 1, 74.10685, -67.14294);
        transform: matrix(1, 0, 0, 1, 74.10685, -67.14294);
    }
    25% {
        -webkit-transform: matrix(1, 0, 0, 1, 67.01013, -74.22697);
        transform: matrix(1, 0, 0, 1, 67.01013, -74.22697);
    }
    26% {
        -webkit-transform: matrix(1, 0, 0, 1, 59.23964, -80.56467);
        transform: matrix(1, 0, 0, 1, 59.23964, -80.56467);
    }
    27% {
        -webkit-transform: matrix(1, 0, 0, 1, 50.87351, -86.09231);
        transform: matrix(1, 0, 0, 1, 50.87351, -86.09231);
    }
    28% {
        -webkit-transform: matrix(1, 0, 0, 1, 41.99587, -90.75432);
        transform: matrix(1, 0, 0, 1, 41.99587, -90.75432);
    }
    29% {
        -webkit-transform: matrix(1, 0, 0, 1, 32.69597, -94.50383);
        transform: matrix(1, 0, 0, 1, 32.69597, -94.50383);
    }
    30% {
        -webkit-transform: matrix(1, 0, 0, 1, 23.06732, -97.30313);
        transform: matrix(1, 0, 0, 1, 23.06732, -97.30313);
    }
    31% {
        -webkit-transform: matrix(1, 0, 0, 1, 13.20674, -99.12407);
        transform: matrix(1, 0, 0, 1, 13.20674, -99.12407);
    }
    32% {
        -webkit-transform: matrix(1, 0, 0, 1, 3.21336, -99.94836);
        transform: matrix(1, 0, 0, 1, 3.21336, -99.94836);
    }
    33% {
        -webkit-transform: matrix(1, 0, 0, 1, -6.81232, -99.76769);
        transform: matrix(1, 0, 0, 1, -6.81232, -99.76769);
    }
    34% {
        -webkit-transform: matrix(1, 0, 0, 1, -16.7695, -98.58389);
        transform: matrix(1, 0, 0, 1, -16.7695, -98.58389);
    }
    35% {
        -webkit-transform: matrix(1, 0, 0, 1, -26.55808, -96.40886);
        transform: matrix(1, 0, 0, 1, -26.55808, -96.40886);
    }
    36% {
        -webkit-transform: matrix(1, 0, 0, 1, -36.07962, -93.26447);
        transform: matrix(1, 0, 0, 1, -36.07962, -93.26447);
    }
    37% {
        -webkit-transform: matrix(1, 0, 0, 1, -45.23839, -89.18233);
        transform: matrix(1, 0, 0, 1, -45.23839, -89.18233);
    }
    38% {
        -webkit-transform: matrix(1, 0, 0, 1, -53.9423, -84.20349);
        transform: matrix(1, 0, 0, 1, -53.9423, -84.20349);
    }
    39% {
        -webkit-transform: matrix(1, 0, 0, 1, -62.10384, -78.37801);
        transform: matrix(1, 0, 0, 1, -62.10384, -78.37801);
    }
    40% {
        -webkit-transform: matrix(1, 0, 0, 1, -69.64094, -71.76447);
        transform: matrix(1, 0, 0, 1, -69.64094, -71.76447);
    }
    41% {
        -webkit-transform: matrix(1, 0, 0, 1, -76.47783, -64.42935);
        transform: matrix(1, 0, 0, 1, -76.47783, -64.42935);
    }
    42% {
        -webkit-transform: matrix(1, 0, 0, 1, -82.54576, -56.44642);
        transform: matrix(1, 0, 0, 1, -82.54576, -56.44642);
    }
    43% {
        -webkit-transform: matrix(1, 0, 0, 1, -87.78371, -47.89593);
        transform: matrix(1, 0, 0, 1, -87.78371, -47.89593);
    }
    44% {
        -webkit-transform: matrix(1, 0, 0, 1, -92.13902, -38.86387);
        transform: matrix(1, 0, 0, 1, -92.13902, -38.86387);
    }
    45% {
        -webkit-transform: matrix(1, 0, 0, 1, -95.56791, -29.44104);
        transform: matrix(1, 0, 0, 1, -95.56791, -29.44104);
    }
    46% {
        -webkit-transform: matrix(1, 0, 0, 1, -98.03589, -19.7222);
        transform: matrix(1, 0, 0, 1, -98.03589, -19.7222);
    }
    47% {
        -webkit-transform: matrix(1, 0, 0, 1, -99.51814, -9.80505);
        transform: matrix(1, 0, 0, 1, -99.51814, -9.80505);
    }
    48% {
        -webkit-transform: matrix(1, 0, 0, 1, -99.99978, 0.21069);
        transform: matrix(1, 0, 0, 1, -99.99978, 0.21069);
    }
    49% {
        -webkit-transform: matrix(1, 0, 0, 1, -99.47594, 10.22431);
        transform: matrix(1, 0, 0, 1, -99.47594, 10.22431);
    }
    50% {
        -webkit-transform: matrix(1, 0, 0, 1, -97.95191, 20.13512);
        transform: matrix(1, 0, 0, 1, -97.95191, 20.13512);
    }
    51% {
        -webkit-transform: matrix(1, 0, 0, 1, -95.443, 29.84348);
        transform: matrix(1, 0, 0, 1, -95.443, 29.84348);
    }
    52% {
        -webkit-transform: matrix(1, 0, 0, 1, -91.97444, 39.25178);
        transform: matrix(1, 0, 0, 1, -91.97444, 39.25178);
    }
    53% {
        -webkit-transform: matrix(1, 0, 0, 1, -87.58111, 48.26541);
        transform: matrix(1, 0, 0, 1, -87.58111, 48.26541);
    }
    54% {
        -webkit-transform: matrix(1, 0, 0, 1, -82.30717, 56.79375);
        transform: matrix(1, 0, 0, 1, -82.30717, 56.79375);
    }
    55% {
        -webkit-transform: matrix(1, 0, 0, 1, -76.20566, 64.75104);
        transform: matrix(1, 0, 0, 1, -76.20566, 64.75104);
    }
    56% {
        -webkit-transform: matrix(1, 0, 0, 1, -69.33793, 72.05728);
        transform: matrix(1, 0, 0, 1, -69.33793, 72.05728);
    }
    57% {
        -webkit-transform: matrix(1, 0, 0, 1, -61.77302, 78.63901);
        transform: matrix(1, 0, 0, 1, -61.77302, 78.63901);
    }
}
@-webkit-keyframes matrix-circular-rotation-reserve {
    1% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 100);
        transform: matrix(1, 0, 0, 1, 0, 100);
    }
    2% {
        -webkit-transform: matrix(1, 0, 0, 1, -9.98334, 99.50042);
        transform: matrix(1, 0, 0, 1, -9.98334, 99.50042);
    }
    3% {
        -webkit-transform: matrix(1, 0, 0, 1, -19.89772, 98.00041);
        transform: matrix(1, 0, 0, 1, -19.89772, 98.00041);
    }
    4% {
        -webkit-transform: matrix(1, 0, 0, 1, -29.61213, 95.51503);
        transform: matrix(1, 0, 0, 1, -29.61213, 95.51503);
    }
    5% {
        -webkit-transform: matrix(1, 0, 0, 1, -39.02881, 92.06928);
        transform: matrix(1, 0, 0, 1, -39.02881, 92.06928);
    }
    6% {
        -webkit-transform: matrix(1, 0, 0, 1, -48.05306, 87.6978);
        transform: matrix(1, 0, 0, 1, -48.05306, 87.6978);
    }
    7% {
        -webkit-transform: matrix(1, 0, 0, 1, -56.59415, 82.44454);
        transform: matrix(1, 0, 0, 1, -56.59415, 82.44454);
    }
    8% {
        -webkit-transform: matrix(1, 0, 0, 1, -64.5662, 76.36233);
        transform: matrix(1, 0, 0, 1, -64.5662, 76.36233);
    }
    9% {
        -webkit-transform: matrix(1, 0, 0, 1, -71.88906, 69.51232);
        transform: matrix(1, 0, 0, 1, -71.88906, 69.51232);
    }
    10% {
        -webkit-transform: matrix(1, 0, 0, 1, -78.4891, 61.96339);
        transform: matrix(1, 0, 0, 1, -78.4891, 61.96339);
    }
    11% {
        -webkit-transform: matrix(1, 0, 0, 1, -84.29995, 53.79143);
        transform: matrix(1, 0, 0, 1, -84.29995, 53.79143);
    }
    12% {
        -webkit-transform: matrix(1, 0, 0, 1, -89.2632, 45.07861);
        transform: matrix(1, 0, 0, 1, -89.2632, 45.07861);
    }
    13% {
        -webkit-transform: matrix(1, 0, 0, 1, -93.32893, 35.91255);
        transform: matrix(1, 0, 0, 1, -93.32893, 35.91255);
    }
    14% {
        -webkit-transform: matrix(1, 0, 0, 1, -96.45627, 26.38539);
        transform: matrix(1, 0, 0, 1, -96.45627, 26.38539);
    }
    15% {
        -webkit-transform: matrix(1, 0, 0, 1, -98.61376, 16.59294);
        transform: matrix(1, 0, 0, 1, -98.61376, 16.59294);
    }
    16% {
        -webkit-transform: matrix(1, 0, 0, 1, -99.77973, 6.63365);
        transform: matrix(1, 0, 0, 1, -99.77973, 6.63365);
    }
    17% {
        -webkit-transform: matrix(1, 0, 0, 1, -99.94244, -3.39234);
        transform: matrix(1, 0, 0, 1, -99.94244, -3.39234);
    }
    18% {
        -webkit-transform: matrix(1, 0, 0, 1, -99.10027, -13.38422);
        transform: matrix(1, 0, 0, 1, -99.10027, -13.38422);
    }
    19% {
        -webkit-transform: matrix(1, 0, 0, 1, -97.26166, -23.24153);
        transform: matrix(1, 0, 0, 1, -97.26166, -23.24153);
    }
    20% {
        -webkit-transform: matrix(1, 0, 0, 1, -94.44513, -32.86515);
        transform: matrix(1, 0, 0, 1, -94.44513, -32.86515);
    }
    21% {
        -webkit-transform: matrix(1, 0, 0, 1, -90.67897, -42.15832);
        transform: matrix(1, 0, 0, 1, -90.67897, -42.15832);
    }
    22% {
        -webkit-transform: matrix(1, 0, 0, 1, -86.00107, -51.0276);
        transform: matrix(1, 0, 0, 1, -86.00107, -51.0276);
    }
    23% {
        -webkit-transform: matrix(1, 0, 0, 1, -80.45845, -59.38381);
        transform: matrix(1, 0, 0, 1, -80.45845, -59.38381);
    }
    24% {
        -webkit-transform: matrix(1, 0, 0, 1, -74.10685, -67.14294);
        transform: matrix(1, 0, 0, 1, -74.10685, -67.14294);
    }
    25% {
        -webkit-transform: matrix(1, 0, 0, 1, -67.01013, -74.22697);
        transform: matrix(1, 0, 0, 1, -67.01013, -74.22697);
    }
    26% {
        -webkit-transform: matrix(1, 0, 0, 1, -59.23964, -80.56467);
        transform: matrix(1, 0, 0, 1, -59.23964, -80.56467);
    }
    27% {
        -webkit-transform: matrix(1, 0, 0, 1, -50.87351, -86.09231);
        transform: matrix(1, 0, 0, 1, -50.87351, -86.09231);
    }
    28% {
        -webkit-transform: matrix(1, 0, 0, 1, -41.99587, -90.75432);
        transform: matrix(1, 0, 0, 1, -41.99587, -90.75432);
    }
    29% {
        -webkit-transform: matrix(1, 0, 0, 1, -32.69597, -94.50383);
        transform: matrix(1, 0, 0, 1, -32.69597, -94.50383);
    }
    30% {
        -webkit-transform: matrix(1, 0, 0, 1, -23.06732, -97.30313);
        transform: matrix(1, 0, 0, 1, -23.06732, -97.30313);
    }
    31% {
        -webkit-transform: matrix(1, 0, 0, 1, -13.20674, -99.12407);
        transform: matrix(1, 0, 0, 1, -13.20674, -99.12407);
    }
    32% {
        -webkit-transform: matrix(1, 0, 0, 1, -3.21336, -99.94836);
        transform: matrix(1, 0, 0, 1, -3.21336, -99.94836);
    }
    33% {
        -webkit-transform: matrix(1, 0, 0, 1, 6.81232, -99.76769);
        transform: matrix(1, 0, 0, 1, 6.81232, -99.76769);
    }
    34% {
        -webkit-transform: matrix(1, 0, 0, 1, 16.7695, -98.58389);
        transform: matrix(1, 0, 0, 1, 16.7695, -98.58389);
    }
    35% {
        -webkit-transform: matrix(1, 0, 0, 1, 26.55808, -96.40886);
        transform: matrix(1, 0, 0, 1, 26.55808, -96.40886);
    }
    36% {
        -webkit-transform: matrix(1, 0, 0, 1, 36.07962, -93.26447);
        transform: matrix(1, 0, 0, 1, 36.07962, -93.26447);
    }
    37% {
        -webkit-transform: matrix(1, 0, 0, 1, 45.23839, -89.18233);
        transform: matrix(1, 0, 0, 1, 45.23839, -89.18233);
    }
    38% {
        -webkit-transform: matrix(1, 0, 0, 1, 53.9423, -84.20349);
        transform: matrix(1, 0, 0, 1, 53.9423, -84.20349);
    }
    39% {
        -webkit-transform: matrix(1, 0, 0, 1, 62.10384, -78.37801);
        transform: matrix(1, 0, 0, 1, 62.10384, -78.37801);
    }
    40% {
        -webkit-transform: matrix(1, 0, 0, 1, 69.64094, -71.76447);
        transform: matrix(1, 0, 0, 1, 69.64094, -71.76447);
    }
    41% {
        -webkit-transform: matrix(1, 0, 0, 1, 76.47783, -64.42935);
        transform: matrix(1, 0, 0, 1, 76.47783, -64.42935);
    }
    42% {
        -webkit-transform: matrix(1, 0, 0, 1, 82.54576, -56.44642);
        transform: matrix(1, 0, 0, 1, 82.54576, -56.44642);
    }
    43% {
        -webkit-transform: matrix(1, 0, 0, 1, 87.78371, -47.89593);
        transform: matrix(1, 0, 0, 1, 87.78371, -47.89593);
    }
    44% {
        -webkit-transform: matrix(1, 0, 0, 1, 92.13902, -38.86387);
        transform: matrix(1, 0, 0, 1, 92.13902, -38.86387);
    }
    45% {
        -webkit-transform: matrix(1, 0, 0, 1, 95.56791, -29.44104);
        transform: matrix(1, 0, 0, 1, 95.56791, -29.44104);
    }
    46% {
        -webkit-transform: matrix(1, 0, 0, 1, 98.03589, -19.7222);
        transform: matrix(1, 0, 0, 1, 98.03589, -19.7222);
    }
    47% {
        -webkit-transform: matrix(1, 0, 0, 1, 99.51814, -9.80505);
        transform: matrix(1, 0, 0, 1, 99.51814, -9.80505);
    }
    48% {
        -webkit-transform: matrix(1, 0, 0, 1, 99.99978, 0.21069);
        transform: matrix(1, 0, 0, 1, 99.99978, 0.21069);
    }
    49% {
        -webkit-transform: matrix(1, 0, 0, 1, 99.47594, 10.22431);
        transform: matrix(1, 0, 0, 1, 99.47594, 10.22431);
    }
    50% {
        -webkit-transform: matrix(1, 0, 0, 1, 97.95191, 20.13512);
        transform: matrix(1, 0, 0, 1, 97.95191, 20.13512);
    }
    51% {
        -webkit-transform: matrix(1, 0, 0, 1, 95.443, 29.84348);
        transform: matrix(1, 0, 0, 1, 95.443, 29.84348);
    }
    52% {
        -webkit-transform: matrix(1, 0, 0, 1, 91.97444, 39.25178);
        transform: matrix(1, 0, 0, 1, 91.97444, 39.25178);
    }
    53% {
        -webkit-transform: matrix(1, 0, 0, 1, 87.58111, 48.26541);
        transform: matrix(1, 0, 0, 1, 87.58111, 48.26541);
    }
    54% {
        -webkit-transform: matrix(1, 0, 0, 1, 82.30717, 56.79375);
        transform: matrix(1, 0, 0, 1, 82.30717, 56.79375);
    }
    55% {
        -webkit-transform: matrix(1, 0, 0, 1, 76.20566, 64.75104);
        transform: matrix(1, 0, 0, 1, 76.20566, 64.75104);
    }
    56% {
        -webkit-transform: matrix(1, 0, 0, 1, 69.33793, 72.05728);
        transform: matrix(1, 0, 0, 1, 69.33793, 72.05728);
    }
    57% {
        -webkit-transform: matrix(1, 0, 0, 1, 61.77302, 78.63901);
        transform: matrix(1, 0, 0, 1, 61.77302, 78.63901);
    }
}
@keyframes matrix-circular-rotation-reserve {
    1% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 100);
        transform: matrix(1, 0, 0, 1, 0, 100);
    }
    2% {
        -webkit-transform: matrix(1, 0, 0, 1, -9.98334, 99.50042);
        transform: matrix(1, 0, 0, 1, -9.98334, 99.50042);
    }
    3% {
        -webkit-transform: matrix(1, 0, 0, 1, -19.89772, 98.00041);
        transform: matrix(1, 0, 0, 1, -19.89772, 98.00041);
    }
    4% {
        -webkit-transform: matrix(1, 0, 0, 1, -29.61213, 95.51503);
        transform: matrix(1, 0, 0, 1, -29.61213, 95.51503);
    }
    5% {
        -webkit-transform: matrix(1, 0, 0, 1, -39.02881, 92.06928);
        transform: matrix(1, 0, 0, 1, -39.02881, 92.06928);
    }
    6% {
        -webkit-transform: matrix(1, 0, 0, 1, -48.05306, 87.6978);
        transform: matrix(1, 0, 0, 1, -48.05306, 87.6978);
    }
    7% {
        -webkit-transform: matrix(1, 0, 0, 1, -56.59415, 82.44454);
        transform: matrix(1, 0, 0, 1, -56.59415, 82.44454);
    }
    8% {
        -webkit-transform: matrix(1, 0, 0, 1, -64.5662, 76.36233);
        transform: matrix(1, 0, 0, 1, -64.5662, 76.36233);
    }
    9% {
        -webkit-transform: matrix(1, 0, 0, 1, -71.88906, 69.51232);
        transform: matrix(1, 0, 0, 1, -71.88906, 69.51232);
    }
    10% {
        -webkit-transform: matrix(1, 0, 0, 1, -78.4891, 61.96339);
        transform: matrix(1, 0, 0, 1, -78.4891, 61.96339);
    }
    11% {
        -webkit-transform: matrix(1, 0, 0, 1, -84.29995, 53.79143);
        transform: matrix(1, 0, 0, 1, -84.29995, 53.79143);
    }
    12% {
        -webkit-transform: matrix(1, 0, 0, 1, -89.2632, 45.07861);
        transform: matrix(1, 0, 0, 1, -89.2632, 45.07861);
    }
    13% {
        -webkit-transform: matrix(1, 0, 0, 1, -93.32893, 35.91255);
        transform: matrix(1, 0, 0, 1, -93.32893, 35.91255);
    }
    14% {
        -webkit-transform: matrix(1, 0, 0, 1, -96.45627, 26.38539);
        transform: matrix(1, 0, 0, 1, -96.45627, 26.38539);
    }
    15% {
        -webkit-transform: matrix(1, 0, 0, 1, -98.61376, 16.59294);
        transform: matrix(1, 0, 0, 1, -98.61376, 16.59294);
    }
    16% {
        -webkit-transform: matrix(1, 0, 0, 1, -99.77973, 6.63365);
        transform: matrix(1, 0, 0, 1, -99.77973, 6.63365);
    }
    17% {
        -webkit-transform: matrix(1, 0, 0, 1, -99.94244, -3.39234);
        transform: matrix(1, 0, 0, 1, -99.94244, -3.39234);
    }
    18% {
        -webkit-transform: matrix(1, 0, 0, 1, -99.10027, -13.38422);
        transform: matrix(1, 0, 0, 1, -99.10027, -13.38422);
    }
    19% {
        -webkit-transform: matrix(1, 0, 0, 1, -97.26166, -23.24153);
        transform: matrix(1, 0, 0, 1, -97.26166, -23.24153);
    }
    20% {
        -webkit-transform: matrix(1, 0, 0, 1, -94.44513, -32.86515);
        transform: matrix(1, 0, 0, 1, -94.44513, -32.86515);
    }
    21% {
        -webkit-transform: matrix(1, 0, 0, 1, -90.67897, -42.15832);
        transform: matrix(1, 0, 0, 1, -90.67897, -42.15832);
    }
    22% {
        -webkit-transform: matrix(1, 0, 0, 1, -86.00107, -51.0276);
        transform: matrix(1, 0, 0, 1, -86.00107, -51.0276);
    }
    23% {
        -webkit-transform: matrix(1, 0, 0, 1, -80.45845, -59.38381);
        transform: matrix(1, 0, 0, 1, -80.45845, -59.38381);
    }
    24% {
        -webkit-transform: matrix(1, 0, 0, 1, -74.10685, -67.14294);
        transform: matrix(1, 0, 0, 1, -74.10685, -67.14294);
    }
    25% {
        -webkit-transform: matrix(1, 0, 0, 1, -67.01013, -74.22697);
        transform: matrix(1, 0, 0, 1, -67.01013, -74.22697);
    }
    26% {
        -webkit-transform: matrix(1, 0, 0, 1, -59.23964, -80.56467);
        transform: matrix(1, 0, 0, 1, -59.23964, -80.56467);
    }
    27% {
        -webkit-transform: matrix(1, 0, 0, 1, -50.87351, -86.09231);
        transform: matrix(1, 0, 0, 1, -50.87351, -86.09231);
    }
    28% {
        -webkit-transform: matrix(1, 0, 0, 1, -41.99587, -90.75432);
        transform: matrix(1, 0, 0, 1, -41.99587, -90.75432);
    }
    29% {
        -webkit-transform: matrix(1, 0, 0, 1, -32.69597, -94.50383);
        transform: matrix(1, 0, 0, 1, -32.69597, -94.50383);
    }
    30% {
        -webkit-transform: matrix(1, 0, 0, 1, -23.06732, -97.30313);
        transform: matrix(1, 0, 0, 1, -23.06732, -97.30313);
    }
    31% {
        -webkit-transform: matrix(1, 0, 0, 1, -13.20674, -99.12407);
        transform: matrix(1, 0, 0, 1, -13.20674, -99.12407);
    }
    32% {
        -webkit-transform: matrix(1, 0, 0, 1, -3.21336, -99.94836);
        transform: matrix(1, 0, 0, 1, -3.21336, -99.94836);
    }
    33% {
        -webkit-transform: matrix(1, 0, 0, 1, 6.81232, -99.76769);
        transform: matrix(1, 0, 0, 1, 6.81232, -99.76769);
    }
    34% {
        -webkit-transform: matrix(1, 0, 0, 1, 16.7695, -98.58389);
        transform: matrix(1, 0, 0, 1, 16.7695, -98.58389);
    }
    35% {
        -webkit-transform: matrix(1, 0, 0, 1, 26.55808, -96.40886);
        transform: matrix(1, 0, 0, 1, 26.55808, -96.40886);
    }
    36% {
        -webkit-transform: matrix(1, 0, 0, 1, 36.07962, -93.26447);
        transform: matrix(1, 0, 0, 1, 36.07962, -93.26447);
    }
    37% {
        -webkit-transform: matrix(1, 0, 0, 1, 45.23839, -89.18233);
        transform: matrix(1, 0, 0, 1, 45.23839, -89.18233);
    }
    38% {
        -webkit-transform: matrix(1, 0, 0, 1, 53.9423, -84.20349);
        transform: matrix(1, 0, 0, 1, 53.9423, -84.20349);
    }
    39% {
        -webkit-transform: matrix(1, 0, 0, 1, 62.10384, -78.37801);
        transform: matrix(1, 0, 0, 1, 62.10384, -78.37801);
    }
    40% {
        -webkit-transform: matrix(1, 0, 0, 1, 69.64094, -71.76447);
        transform: matrix(1, 0, 0, 1, 69.64094, -71.76447);
    }
    41% {
        -webkit-transform: matrix(1, 0, 0, 1, 76.47783, -64.42935);
        transform: matrix(1, 0, 0, 1, 76.47783, -64.42935);
    }
    42% {
        -webkit-transform: matrix(1, 0, 0, 1, 82.54576, -56.44642);
        transform: matrix(1, 0, 0, 1, 82.54576, -56.44642);
    }
    43% {
        -webkit-transform: matrix(1, 0, 0, 1, 87.78371, -47.89593);
        transform: matrix(1, 0, 0, 1, 87.78371, -47.89593);
    }
    44% {
        -webkit-transform: matrix(1, 0, 0, 1, 92.13902, -38.86387);
        transform: matrix(1, 0, 0, 1, 92.13902, -38.86387);
    }
    45% {
        -webkit-transform: matrix(1, 0, 0, 1, 95.56791, -29.44104);
        transform: matrix(1, 0, 0, 1, 95.56791, -29.44104);
    }
    46% {
        -webkit-transform: matrix(1, 0, 0, 1, 98.03589, -19.7222);
        transform: matrix(1, 0, 0, 1, 98.03589, -19.7222);
    }
    47% {
        -webkit-transform: matrix(1, 0, 0, 1, 99.51814, -9.80505);
        transform: matrix(1, 0, 0, 1, 99.51814, -9.80505);
    }
    48% {
        -webkit-transform: matrix(1, 0, 0, 1, 99.99978, 0.21069);
        transform: matrix(1, 0, 0, 1, 99.99978, 0.21069);
    }
    49% {
        -webkit-transform: matrix(1, 0, 0, 1, 99.47594, 10.22431);
        transform: matrix(1, 0, 0, 1, 99.47594, 10.22431);
    }
    50% {
        -webkit-transform: matrix(1, 0, 0, 1, 97.95191, 20.13512);
        transform: matrix(1, 0, 0, 1, 97.95191, 20.13512);
    }
    51% {
        -webkit-transform: matrix(1, 0, 0, 1, 95.443, 29.84348);
        transform: matrix(1, 0, 0, 1, 95.443, 29.84348);
    }
    52% {
        -webkit-transform: matrix(1, 0, 0, 1, 91.97444, 39.25178);
        transform: matrix(1, 0, 0, 1, 91.97444, 39.25178);
    }
    53% {
        -webkit-transform: matrix(1, 0, 0, 1, 87.58111, 48.26541);
        transform: matrix(1, 0, 0, 1, 87.58111, 48.26541);
    }
    54% {
        -webkit-transform: matrix(1, 0, 0, 1, 82.30717, 56.79375);
        transform: matrix(1, 0, 0, 1, 82.30717, 56.79375);
    }
    55% {
        -webkit-transform: matrix(1, 0, 0, 1, 76.20566, 64.75104);
        transform: matrix(1, 0, 0, 1, 76.20566, 64.75104);
    }
    56% {
        -webkit-transform: matrix(1, 0, 0, 1, 69.33793, 72.05728);
        transform: matrix(1, 0, 0, 1, 69.33793, 72.05728);
    }
    57% {
        -webkit-transform: matrix(1, 0, 0, 1, 61.77302, 78.63901);
        transform: matrix(1, 0, 0, 1, 61.77302, 78.63901);
    }
}

HTML

Circular motion using CSS3 Matrix 用来学习matrix变换的基本用法。

css3, transform

编辑器支持Emmet

快捷键

Circular motion using CSS3 Matrix 用来学习matrix变换的基本用法。

css3, transform

使用H5动画演示CSS3变换原点（transform-origin）工作原理

使用CSS3 PerspectiveTransform实现的逼真3D地球自转动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：