3D translate an element in HTML
To translate the element, you need:
<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>
- A container having CSS style "perspective: ___px"
- The actual element having CSS style "transform: rotateX(___deg)"
<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>
testing | testing | testing | testing | testing |
testing | testing | testing | testing | testing |
testing | testing | testing | testing | testing |
testing | testing | testing | testing | testing |
testing | testing | testing | testing | testing |
testing | testing | testing | testing | testing |
testing | testing | testing | testing | testing |
testing | testing | testing | testing | testing |
testing | testing | testing | testing | testing |
testing | testing | testing | testing | testing |
Comments
Post a Comment