Friday, May 29, 2015

3D translate an element in HTML

To translate the element, you need:
  1. A container having CSS style "perspective: ___px"
  2. The actual element having CSS style "transform: rotateX(___deg)"
Sample:

<div style="perspective:500px; margin-left:100px;">
    <div style="transform: rotateX(40deg)">
        <table border=1>
            <tr><td>testing</td><td>testing</td><td>testing</td></tr>
            <tr><td>testing</td><td>testing</td><td>testing</td></tr>
            ...
            <tr><td>testing</td><td>testing</td><td>testing</td></tr>
            <tr><td>testing</td><td>testing</td><td>testing</td></tr>
    </table>                
    </div>
</div>
testingtestingtestingtestingtesting
testingtestingtestingtestingtesting
testingtestingtestingtestingtesting
testingtestingtestingtestingtesting
testingtestingtestingtestingtesting
testingtestingtestingtestingtesting
testingtestingtestingtestingtesting
testingtestingtestingtestingtesting
testingtestingtestingtestingtesting
testingtestingtestingtestingtesting

No comments:

Post a Comment

CSP on Apache

To add CSP to root if sort of funny. The following will NOT work for most cases !!     <LocationMatch "^/$">        Header s...