samcyn/mat.html

## mat.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style type="text/css">
            body{
                background: #EEE;
                height: 100vh;
                margin: 0;
                padding: 0;
            }
            .d-flex{
                display: flex;
                justify-content: center;
                align-items: center;
                flex-wrap: wrap;
            }
            .mats{
                height: 400px;
                width: 400px;
                transform: perspective( 1200px ) rotateX( -114deg );
                perspective-origin: 25% 75%;
            }
            .mat{
                height: 5px;
                width: 400px;
            }
            .mat__square{
                animation: spin 1s linear both alternate infinite;
                flex: 0 0 1.25%;
                height: 5px;
                transition: all 1s linear;
                width: 5px;
            }
            .mat__square:hover{
                transform: scale(3.1);
            }

            .mat:nth-child(even) .mat__square:nth-child(odd){
                background: orange;
            }
            .mat:nth-child(odd) .mat__square:nth-child(even){
                background: #C00;
            }
            @keyframes spin {
                0%{
                    border-radius: 100%;
                    transform: rotate(360deg);
                }
                20%{
                    border-radius: 40%;
                    transform: rotate(288deg);
                }
                40%{
                    border-radius: 30%;
                    transform: rotate(216deg);
                }
                60%{
                    border-radius: 20%;
                    transform: rotate(144deg);
                }
                80%{
                    border-radius: 10%;
                    transform: rotate(72deg);
                }

                100%{
                    border-radius: 0;
                    transform: rotate(0);
                }

            }
        </style>

    </head>
    <body class="d-flex">

        <div class="mats d-flex">

        </div>


        <script>
            var n = 160;

            var output = '';
            var mats = document.getElementsByClassName('mats')[0]

            for(var i = 0; i < 80; i++){
                output += '<div class="mat d-flex">'
                for(var j = 0; j < 80; j++){
                    output += '<div class="mat__square"></div>';
                }
                output += '</div>';
            }
            mats.innerHTML = output;
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title></title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style type="text/css">
	body{
	background: #EEE;
	height: 100vh;
	margin: 0;
	padding: 0;
	}
	.d-flex{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	}
	.mats{
	height: 400px;
	width: 400px;
	transform: perspective( 1200px ) rotateX( -114deg );
	perspective-origin: 25% 75%;
	}
	.mat{
	height: 5px;
	width: 400px;
	}
	.mat__square{
	animation: spin 1s linear both alternate infinite;
	flex: 0 0 1.25%;
	height: 5px;
	transition: all 1s linear;
	width: 5px;
	}
	.mat__square:hover{
	transform: scale(3.1);
	}

	.mat:nth-child(even) .mat__square:nth-child(odd){
	background: orange;
	}
	.mat:nth-child(odd) .mat__square:nth-child(even){
	background: #C00;
	}
	@keyframes spin {
	0%{
	border-radius: 100%;
	transform: rotate(360deg);
	}
	20%{
	border-radius: 40%;
	transform: rotate(288deg);
	}
	40%{
	border-radius: 30%;
	transform: rotate(216deg);
	}
	60%{
	border-radius: 20%;
	transform: rotate(144deg);
	}
	80%{
	border-radius: 10%;
	transform: rotate(72deg);
	}

	100%{
	border-radius: 0;
	transform: rotate(0);
	}

	}
	</style>

	</head>
	<body class="d-flex">

	<div class="mats d-flex">

	</div>


	<script>
	var n = 160;

	var output = '';
	var mats = document.getElementsByClassName('mats')[0]

	for(var i = 0; i < 80; i++){
	output += '<div class="mat d-flex">'
	for(var j = 0; j < 80; j++){
	output += '<div class="mat__square"></div>';
	}
	output += '</div>';
	}
	mats.innerHTML = output;
	</script>
	</body>
	</html>