-
-
Book Rendered in 3D Transform CSS
Except it isn't at the moment!
Press the button up there for that.But there is a story from page 7 onwards
Read on...
-
-
CSS3 3D Transforms
3D Page Turning Book Experiment
Once apon a time, a long, long time ago, there was a big bad monster called Flash...
Then one day Ben, a web designer from London, thought to himself maybe it just might be possible to create a book with turning pages, like they used to try and replicate in Flash, but using CSS3 3D Transforms.
An actual 3D book that Search engines would love because all the content is laid out in a neat and semantic way!
-
An actual 3D, fully functional, book!
Not only that but the pages would actually turn, not just look as though they do.
Everyone thought Ben was mad but he set to work anyway...
Low and behold, after a couple of evenings work he eventually reemerges with this monstrosity!
Unfortunately this with never work with Flash's evil friends the Internet Explorer family, neither will it work on older graphics cards, but for now, Ben is content with his creation.
-
-
-
Page Three
As it is simply created using basic HTML there is no problem in adding images or links etc.
At the moment it is completely responsive including the font size. So it should work in any size window... In theory.
Yes it does still have a few glitches here and there but this is only a beta testing version so all will hopefully come good in the end.
One day I hope to have it fully functional on tablets so you can flip the page with a swipe of your finger.
To be continued...
-
Page Four
Now with Mobile Mode!
Although only the bottom navigational buttons work at the moment.
Narrow your browser to a portrait ratio for it to come into effect.
Not available in 3d :(
Now also available with arrow keys!
-
-
-
-
Page Seven
Deman Drawkcab is not your average cup of tea. Slightly different to thee established Homo-sapiens. Not utterly different but by no means run-of-the-mill.
For example: Yesterday Deman had just crossed Green Park and was now walking up Picadilly in London. He stopped just outside the Ritz on his way to the Police station. I should point out, he wasn't going there to help out, he was in trouble, but I'll get to that later... Anyway, he was outside the Ritz waiting to cross the road; the traffic lights to his right had obviously turned red as the oncoming traffic had stopped so he began to cross.
-
Page Eight
Now the thing about these lights outside the Ritz is, they have a pedestrian crossing marked on the road, but, there are no nice green men available to suggest when for him to cross. Deman presumed it was good to go as the traffic to his right had stopped and he only needed to make it to the central road gondola, as if that's what it's called, but unfortunately the traffic had only stopped to let the other traffic from the junction in front on him out. This traffic roared from the junction, eager to get where they need to be. It was too late for Deman to turn back now, he was half way across yet a white van in the inside lane accelerated towards him fast....
-
-
-
Page Nine
Sorry to stop at this rather inconvenient moment but I think I may have to fill you in with a few details. Deman Drawkcab is an odd looking man. He is tall, well built but not visibly muscular, a large build, but not fat. He has a strange geeky, mullet type hair cut which looks as if it was styled in the 70's and gives him the appearance of being a bit simple and slow, like a man you wouldn't want to sit next to on the bus for fear you have no idea what he might do next. A bit like a retarded tramp. I think an inbred appearance might be the best way to describe him.
-
Page Ten
Deman is very antisocial, he has no friends and only really talks in grunts, mainly due to laziness, he could probably hold a meaningful conversation but anyone is yet to find out. His appearance is deceptive, not in the way you might think, for he is incredibly unfit and very easily gets out of breath, merely walking causes him suitable discomfort.
He knows he is different, his parents were similar. He has noticed that with every generation the Drawkcab's were getting more and more different from the last, further from the norm, different in quite an extraordinary way. Their build has become slightly bulkier than an average person with every birth, but that's pretty insignificant, the strange thing is that their appearance doesn't really reflect their actual weight.
-
-
-
Page Eleven
Unfortunately Deman has not been able to find any scales strong enough to way himself which gives you a clue to his unconventional characteristic. His mum being the curious type, a tall, voluptuous lady, but not fat, once had access to a weigh bridge and found she weighed a mere 9120 kg, around 10 tons or 1436 stone, depending on how you work.
Deman is guessing that he is double this, going by the effect he has on the surrounding landscape and knowing that his mum was double the weight of his grandmother.
-
Page Twelve
Being the same weight as a double-decker bus has it's disadvantages; not being able to enjoy a nice day at the beach or a long walk in the park, not being able to enter most shops or buildings for fear that the floor will collapse, not being able to cross many small bridges, drive, ride public transport or catch aeroplanes. But it does have a fair number of advantages. Everything is relative and having all that mass compressed into such a small frame does enable him to lift things easily half his weight, such as a car, making changing a tyre a doddle, not that he needs to do this very often. Also with this great bulk, compared to an average man he appears to be made of iron or in his case lead and fairly indestructible when he comes in contact with things that an average man would ever encounter on a day to day basis.
-
-
-
Page Thirteen
Things to do...
- Add arrow keys function ✔
- Fix left page zoom in explode mode ✔
- Improve animation in Explorer ✔
- Swipe on mobile ✔
- 3D Button - Active / Inactive ✔
- Sort out Zoom ✔
- Fix explode in mobile ✔
- Fix lists in zoom mode ✔
- Fix images in Explorer
- Fix mobile to full
- Improve swipe on mobile
- Improve speed
-
