canvas实现立体多边形矩阵动画效果代码-html代码-BFW代码库

canvas实现立体多边形矩阵动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现立体多边形矩阵动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
        height: 100vh;
        width: 96vw;
        margin: 0;
        display: grid;
        place-items: center;
}

.shape {
        position: relative;
        height: 200px;
        width: 200px;
        display: flex;
        justify-contents: center;
        /*      border: 1px solid grey; */
        display: -webkit-box;
        -webkit-box-align: center;
        align-items: center;
        -webkit-perspective: 200px;
        perspective: 200px;
}

.refl1,
.refl2,
.refl3 {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        height: 200px;
        width: 200px;
}
.refl1 {
        left: -99%;
        /*      border: 20px solid red; */
        -webkit-transform: rotateY(-90deg) rotateZ(-30deg);
        transform: rotateY(-90deg) rotateX(30deg);
        width: 400px;
        height: 400px;
        border: none;
}

.refl2 {
        /*      border: 20px solid yellow; */
        border: none;
        -webkit-transform: rotateY(-90deg) rotateZ(-30deg);
        transform: rotateY(-90deg) rotateX(-30deg);
        width: 400px;
        height: 360px;
}
.refl3 {
        bottom: -200%;
        height: 550px;
        width: 450px;
        left: -60%;
        /*      border: 20px solid blue; */
        -webkit-transform: rotateX(-90deg);
        transform: rotateX(-90deg);
        border: none;
}

#Matrix2,
#Matrix1 {
        -webkit-transform: rotateZ(90deg);
        transform: rotateZ(90deg);
}

.platform {
        position: absolute;
        z-index: 0;
        right: -50%;
        border: 1px solid green;
        width: 400px;
        height: 400px;
        background-size: 20%;
        background-position: center;
        background-repeat: no-repeat;
        background-color: black;
        background-image: url("//repo.bfw.wiki/bfwrepo/images/bubbue/Polygons.gif");
}
</style>




</head>

<body translate="no" >
  <div class="shape">
        <div class="platform"></div>
        <div class="refl1">
                <canvas id="Matrix1"&.........完整代码请登录后点击上方下载按钮下载查看