3 Boyutlu Dönüştürme transform-origin

3 Boyutlu Dönüştürme transform-origin

by fatihhayri

HTML

<div class="sampleAndGhosts">
    <div class="ghost">Original</div>    
    <div class="sample">Episode V<br/><br/> Style sheets have existed in one form or another since the beginnings of SGML in the 1970s. Cascading Style Sheets were developed as a means for creating a consistent approach to providing style information for web documents.</div>
    
</div>

CSS

body {
    margin: 20px 0 0 120px
}

.sampleAndGhosts {
    margin: auto;
    position: relative;
}

.ghost, .sample {
    position: absolute;
    top: 0;
    left: 0;
    width: 250px;
    height: 150px;
    overflow: hidden;
    padding: 0 8px;
    color: White;
    text-align: left;
    font-weight: 600;
    font-size: 19px;
    line-height: 1.2em
}

.ghost {
    background-color: rgba(0, 135, 255, 0.25);
    border: solid 1px rgba(0, 0, 0, 0.25)
}

.sample {
    background-color: rgb(0, 135, 255);
    border: solid 1px rgb(0, 0, 0);
    -moz-transform: perspective(400px) rotatex(45deg);
    -ms-transform: perspective(400px) rotatex(45deg);
    -o-transform: perspective(400px) rotatex(45deg);
    -webkit-transform: perspective(400px) rotatex(45deg);
    transform: perspective(400px) rotatex(45deg);
    -webkit-transform-origin: center bottom -20px;      
    -moz-transform-origin   : 0 0 50px;
    -ms-transform-origin    : 0 0 50px;
    -o-transform-origin     : 0 0 50px;
    transform-origin        : 0 0 50px;    
}