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

CSP on Apache

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