CSS3 try with pos "absolute"

by secretgspot

HTML

<div class="box">
    <div class="plan">
        <div class="plan1">PLAN 1</div>
        <div class="plan2"><br />PLAN 2</div>
    </div>
</div>

CSS

div {
    width:200px;
    height:200px;
    font:24px Arial;
    color:red;
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin:0 0 0;
    -moz-transform-style: preserve-3d;
    -moz-transform-origin:0 0 0;
}

@-webkit-keyframes spin {
    from { -webkit-transform: rotateY(0); }
    to   { -webkit-transform: rotateY(360deg); }
}

@-moz-keyframes spin {
    from { -moz-transform: rotateY(0); }
    to   { -moz-transform: rotateY(360deg); }
}

.box {
    -webkit-perspective: 800px;
    -webkit-perspective-origin: 100px -100px;
    -moz-perspective: 800px;
    -moz-perspective-origin: 100px -100px;
    margin:50px auto;
    background:rgba(0,0,0,.3);
}
    .plan {
        position:relative;
        -webkit-transform: rotateY(20deg) rotateX(45deg);
        -moz-transform: rotateY(20deg) rotateX(45deg);
        border:5px solid yellow;
        /*-webkit-animation: spin 10s infinite linear;
        -moz-animation: spin 10s infinite linear;*/
    }
        .plan1 {
            -webkit-transform: rotateX(-25deg);
            -moz-transform: rotateX(-25deg);
            background:rgba(255,0,0,.3);    
        }
        .plan2 {
            position:absolute;
            bottom:50%;    
            -webkit-transform:rotateX(-65deg);
            -moz-transform:rotateX(-65deg);
            background:rgba(0,0,255,.3);
        }