Here are examples of techniques to flip text in a box using CSS and JavaScript.
You’ve seen things on the web that look like this before. The difference between these techniques and the conventional one is that here, the text that apparently changes is really text; in the conventional technique, it is an image file.
In these techniques, the text can be searched, selected, copied, or saved. In some browsers, it can be magnified, for easier reading.
These techniques all seem to work in any newer browser that supports CSS and JavaScript. In years before about 2012, browser performance was spotty. Here’s more info on old problems.
The technique here is to completely replace the text in the table cell
by setting its JavaScript innerHTML attribute.
|
This is the first page of text
|
Although changing the text is programmatically natural, this technique suffers from the fact that the hidden text is only in JavaScript, not in the table itself, so if you view it with a text-only browser, you don’t see the hidden text.
The technique here is to put the text of all the pages into the
document at once, but set the CSS display attribute to
block for only one, and to none for the others.
|
This is the first page of text
|
The technique here is to put the text of all the pages into the
document at once, but set the CSS visibility attribute to
visible for only one, and to hidden for the others.
However, CSS hidden items still take up space,
so the position attribute is set to absolute.
|
This is the first page of text
This is the second page of text
This is the third page of text
This is the fourth page of text
|
Setting the position to absolute has unfortunate
consequences, though: the text is no longer implicitly constrained to the
table cell.
The technique here is to set the CSS position of the text to
absolute, and then make the desired text come to the top by giving
it the highest z-index.
|
This is the first page of text
This is the second page of text
This is the third page of text
This is the fourth page of text
|