CSS3 Page Flip Book - version 2

PC IE9+ Firefox, Safari, Chrome, Opera
Mac Chrome, Firefox, iPad, iPhone and iPod Touch
Android (as used on the Kindle Fire)

5h December 2012

CSS play
Book
Page Turn Demonstration

The Tale of Peter Rabbit
by
Beatrix Potter

- 1 -

Once upon a time there were four little Rabbits, and their names were-- Flopsy, Mopsy, Cotton-tail, and Peter.
They lived with their Mother in a sand-bank, underneath the root of a very big fir-tree.

- 2 -

"Now, my dears," said old Mrs. Rabbit one morning, "you may go into the fields or down the lane, but don't go into Mr. McGregor's garden: your Father had an accident there; he was put in a pie by Mrs. McGregor."

- 3 -

"Now run along, and don't get into mischief. I am going out."
Then old Mrs. Rabbit took a basket and her umbrella, and went through the wood to the baker's.
She bought a loaf of brown bread and five currant buns.

- 4 -

Flopsy, Mopsy, and Cotton-tail, who were good little bunnies, went down the lane to gather blackberries;
But Peter, who was very naughty, ran straight away to Mr. McGregor's garden, and squeezed under the gate!

- 5 -

First he ate some lettuces and some French beans; and then he ate some radishes;
And then, feeling rather sick, he went to look for some parsley.

- 6 -

But round the end of a cucumber frame, whom should he meet but Mr. McGregor!
Mr. McGregor was on his hands and knees planting out young cabbages, but he jumped up and ran after Peter, waving a rake and calling out, "Stop thief." - 7 -

Peter was most dreadfully frightened; he rushed all over the garden, for he had forgotten the way back to the gate.
He lost one of his shoes among the cabbages, and the other shoe amongst the potatoes. - 8 -

After losing them, he ran on four legs and went faster, so that I think he might have got away altogether if he had not unfortunately run into a gooseberry net, and got caught by the large buttons on his jacket.
It was a blue jacket with brass buttons, quite new.

- 9 -

Peter gave himself up for lost, and shed big tears; but his sobs were overheard by some friendly sparrows, who flew to him in great excitement, and implored him to exert himself.

- 10 -

Mr. McGregor came up with a sieve, which he intended to pop upon the top of Peter; but Peter wriggled out just in time, leaving his jacket behind him.
And rushed into the toolshed, and jumped into a can. It would have been a beautiful thing to hide in, if it had not had so much water in it.

- 11 -

Mr. McGregor was quite sure that Peter was somewhere in the toolshed, perhaps hidden underneath a flower- pot. He began to turn them over carefully, looking under each.

- 12 -

Presently Peter sneezed-- "Kertyschoo!" Mr. McGregor was after him in no time,
And tried to put his foot upon Peter, who jumped out of a window, upsetting three plants. The window was too small for Mr. McGregor, and he was tired of running after Peter. He went back to his work.

- 13 -

Peter sat down to rest; he was out of breath and trembling with fright, and he had not the least idea which way to go. Also he was very damp with sitting in that can.

- 14 -

After a time he began to wander about, going lippity--lippity--not very fast, and looking all around.
He found a door in a wall; but it was locked, and there was no room for a fat little rabbit to squeeze underneath.

- 15 -

An old mouse was running in and out over the stone doorstep, carrying peas and beans to her family in the wood. Peter asked her the way to the gate, but she had such a large pea in her mouth that she could not answer. She only shook her head at him. Peter began to cry.

- 16 -

Then he tried to find his way straight across the garden, but he became more and more puzzled. Presently, he came to a pond where Mr. McGregor filled his water-cans. A white cat was staring at some goldfish; she sat very, very still, but now and then the tip of her tail twitched as if it were alive.
Peter thought it best to go away without speaking to her; he has heard about cats from his cousin, little Benjamin Bunny.

- 17 -

He went back towards the toolshed, but suddenly, quite close to him, he heard the noise of a hoe-- scr-r-ritch, scratch, scratch, scritch. Peter scuttered underneath the bushes. But presently, as nothing happened, he came out, and climbed upon a wheelbarrow, and peeped over.
The first thing he saw was Mr. McGregor hoeing onions. His back was turned towards Peter, and beyond him was the gate!

- 18 -

Peter got down very quietly off the wheelbarrow, and started running as fast as he could go, along a straight walk behind some black-currant bushes.
Mr. McGregor caught sight of him at the corner, but Peter did not care. He slipped underneath the gate, and was safe at last in the wood outside the garden.

- 19 -

Mr. McGregor hung up the little jacket and the shoes for a scare-crow to frighten the blackbirds.
Peter never stopped running or looked behind him till he got home to the big fir-tree.

- 20 -

He was so tired that he flopped down upon the nice soft sand on the floor of the rabbit-hole, and shut his eyes. His mother was busy cooking; she wondered what he had done with his clothes. It was the second little jacket and pair of shoes that Peter had lost in a fortnight!
I am sorry to say that Peter was not very well during the evening.

- 21 -

His mother put him to bed, and made some camomile tea; and she gave a dose of it to Peter!
"One table-spoonful to be taken at bed-time."

But Flopsy, Mopsy, and Cotton-tail had bread and milk and blackberries for supper.

- 22 -

The End

copyright © stu nicholls - CSS play

Information

Absolutely NO javascript.

The previous demonstratons recoded and styled so that the page flip is more realistic. This does not use 3d transforms to produce the effect, just 2d transforms. The style 'preserve-3d;' is used to speed up the transforms.

Hover over any page you want to flip to show a page curl graphic at the top left or right of that page. Click this page curl graphic to flip the page.

For the iPad, iPhone, iPod Touch and Android, tap the page you want to turn and then tap the page curl which will appear at the top of that page.

Works smoothly in Firefox, Chrome and Android, but Safari and Opera have problems in producing a smooth flip. IE9 has an instant flip of the pages, but IE10 sees a smooth flip .

The code and stylesheet is quite complex and not easy to grasp what is actually happening.

All the text in the book can be selected and can contain links to other pages.


Copyright

You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.



Please Support CSS play

Please note that if your donation is for a demo/menu then you will need to email me with the url of the demo/menu after making the donation

For more CSS demonstrations I recommend that you visit the Dynamic Drive CSS Library.


Free, practical CSS menus, layouts, and examples

Follow CSS play


Facebook   Twitter   Facebook Fan Page