3d Matrix Transform

1.2 = scale -20 = translateX 100 = translateY

by siegesan

HTML

<div id="container">
        <div class="threeD">
            <canvas style="background:gray; background-repeat: no-repeat"
                id="first" height="300" width="300">
            </canvas>
            <div class="marker marker3D"  id="marker" style=top:50px;left:50px;position:absolute ></img>
        </div>
    </div>

CSS

.threeD
{
    -webkit-transform: matrix3d(1.2, 0, 0, 0, 
                                0, 1.2, 0, 0, 
                                0, 0, 1, 0, 
                                -20, 100, 0, 1);

    -webkit-transition: all 1.0s ease-in-out;     
                        position:relative;
                        margin-bottom:-400px; 
}
        #container
        {
            left: 100px;
            position: absolute;
        }
        
        .marker
        {
            -webkit-transform-origin: bottom;
            color: white;
           -webkit-transform-style: preserve-3d;
            font-family: arial;
            text-align: center;
            margin:0px;
            height:100px;
            width:100px;
            background:red;
        }
        
        .marker3D
        {
            -webkit-transform: matrix3d(1,0, 0, 0, 
                                        0, 1, 0 , 0, 
                                        0, 0, 1, 0, 
                                        0, 0, 0.1, 1);
            -webkit-transition: all .5s ease-in-out;
            position: absolute;
        }