| <!DOCTYPE html> | |
| <style> | |
| #parentY { | |
| transform: translateY(-10000px); | |
| -webkit-transform: translateY(-10000px); | |
| -o-transform: translateY(-10000px); | |
| -ms-transform: translateY(-10000px); | |
| -moz-transform: translateY(-10000px); | |
| } | |
| #parentX { | |
| transform: translateX(-10000px); | |
| -webkit-transform: translateX(-10000px); | |
| -o-transform: translateX(-10000px); | |
| -ms-transform: translateX(-10000px); | |
| -moz-transform: translateX(-10000px); | |
| } | |
| #transformX { | |
| transform: translateX(-10000px); | |
| -webkit-transform: translateX(-10000px); | |
| -o-transform: translateX(-10000px); | |
| -ms-transform: translateX(-10000px); | |
| -moz-transform: translateX(-10000px); | |
| } | |
| #transformY { | |
| transform: translateY(-10000px); | |
| -webkit-transform: translateY(-10000px); | |
| -o-transform: translateY(-10000px); | |
| -ms-transform: translateY(-10000px); | |
| -moz-transform: translateY(-10000px); | |
| } | |
| #zero-transform { | |
| transform: translateY(0px); | |
| -webkit-transform: translateY(0px); | |
| -o-transform: translateY(0px); | |
| -ms-transform: translateY(0px); | |
| -moz-transform: translateY(0px); | |
| transform: translateX(0px); | |
| -webkit-transform: translateX(0px); | |
| -o-transform: translateX(0px); | |
| -ms-transform: translateX(0px); | |
| -moz-transform: translateX(0px); | |
| } | |
| </style> | |
| <div id='zero-tranform'> | |
| You shouldn't see anything other than this sentence on the page | |
| </div> | |
| <div id='parentY'> | |
| I have a hidden child | |
| <div id='childY'> | |
| I am a hidden child | |
| </div> | |
| </div> | |
| <div id='parentX'> | |
| I have a hidden child | |
| <div id='childX'> | |
| I am a hidden child | |
| </div> | |
| </div> | |
| <div id='transformX'>I am a hidden element </div> | |
| <div id='transformY'>I am a hidden element </div> |