Football Stadium

by XcsN

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="raph-rotate"></div>

CSS

body {
    /* the lower the value, the higher the transformation */
    -webkit-perspective: 600px;
}

#raph-rotate {
    width: 500px;
    height: 750px;
    margin: 0 auto;
    -webkit-transform: rotateX(60deg);
    -webkit-transform-origin: 50% 100%;
}

JavaScript

var box = $("#raph-rotate");
var WIDTH = parseFloat(box.css("width"));
var HEIGHT = parseFloat(box.css("height"));

var paper = new Raphael("raph-rotate", WIDTH, HEIGHT);

var line_color = "#ffffff"; // Lienienfarbe Std: ffffff
var field_color1 = "#32F002"; // Feldhintergrundfarbe 1 Std: 418b35
var field_color2 = "#00C742"; // Feldhintergrundfarbe 2 Std: 387c33
var opacity = 0.9; // Gesamt Feldhintergrund-Transparenz 0-1


paper.setStart();
// Feldhintergrund
Obj=paper.path('M 2500 3750 L 2500 3481.9 L 0 3481.9 L 0 3750 L 2500 3750Z');
Obj.attr({'fill':field_color1,'stroke':'none', 'fill-opacity': opacity});
Obj=paper.path('M 2500 3482.2 L 2500 3214.1 L 0 3214.1 L 0 3482.2 L 2500 3482.2Z');
Obj.attr({'fill':field_color2,'stroke':'none', 'fill-opacity': opacity});
Obj=paper.path('M 2500 3214.3 L 2500 2946.2 L 0 2946.2 L 0 3214.3 L 2500 3214.3Z');
Obj.attr({'fill':field_color1,'stroke':'none', 'fill-opacity': opacity});
Obj=paper.path('M 2500 2946.5 L 2500 2678.4 L 0 2678.4 L 0 2946.5 L 2500 2946.5Z');
Obj.attr({'fill':field_color2,'stroke':'none', 'fill-opacity': opacity});
Obj=paper.path('M 2500 2678.6 L 2500 2410.6 L 0 2410.6 L 0 2678.6 L 2500 2678.6Z');
Obj.attr({'fill':field_color1,'stroke':'none', 'fill-opacity': opacity});
Obj=paper.path('M 2500 2410.8 L 2500 2142.7 L 0 2142.7 L 0 2410.8 L 2500 2410.8Z');
Obj.attr({'fill':field_color2,'stroke':'none', 'fill-opacity': opacity});
Obj=paper.path('M 2500 2142.9 L 2500 1874.9 L 0 1874.9 L 0 2142.9 L 2500 2142.9Z');
Obj.attr({'fill':field_color1,'stroke':'none', 'fill-opacity': opacity});
Obj=paper.path('M 2500 1875.1 L 2500 1607 L 0 1607 L 0 1875.1 L 2500 1875.1Z');
Obj.attr({'fill':field_color2,'stroke':'none', 'fill-opacity': opacity});
Obj=paper.path('M 2500 1607.3 L 2500 1339.2 L 0 1339.2 L 0 1607.3 L 2500 1607.3Z');
Obj.attr({'fill':field_color1,'stroke':'none', 'fill-opacity': opacity});
Obj=paper.path('M 2500 1339.4 L 2500 1071.3 L 0 1071.3 L 0 1339.4 L 2500...