transform3D

transform3D test

by miya lee

HTML

<div class="form-loading-square">旋转跳跃我闭着眼</div>
<div class="reference"></div>

CSS

.form-loading-square{
    width: 140px;
    height: 140px;

    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -20px;
    margin-top: -20px;

    background-color: #ccc;
    animation: loading 2000ms linear infinite both;
}

.reference {
    width: 140px;
    height: 140px;

    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -20px;
    margin-top: -20px;

    border:1px solid #ccc;
}

@keyframes loading {
    0% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
    30% {
        transform: matrix3d(0, 0, -1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1);
    }
    60% {
        transform: matrix3d(-1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1);
    }
    100% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
}