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

Comments

Popular posts from this blog

Java encoding : UTF-8, Big5, x-MS950-HKSCS