

Apparently transparent – CSS3D HTML5 Experiment - alexcasalboni
http://www.dhteumeuleu.com/apparently-transparent

======
Aardwolf
So CSS can do 3D, but still not vertically center multiline text in a
straightforward way?

~~~
alexcasalboni
True story. Too many hacks are needed for that: [http://css-
tricks.com/vertically-center-multi-lined-text/](http://css-
tricks.com/vertically-center-multi-lined-text/)

Anyways, centered stuff is evil! [http://uxmovement.com/content/why-you-
should-never-center-al...](http://uxmovement.com/content/why-you-should-never-
center-align-paragraph-text/)

~~~
Izeau
This article isn’t about vertically-centered text but horizontally-centered
text. You don’t expect the starting place of each line to change with
vertically-centered text!

------
examancer
Fantastic demo and the source code is concise and clean. Thanks.

------
code_duck
I loaded this page in Safari, tried scrolling it, and then Safari did the
'This page was reloaded' thing. Then my iPhone 6 Plus spontaneously rebooted.
The crash is repeatable, too.

~~~
TazeTSchnitzel
Works fine on my iPhone 5C, and that's a phone with an A6.

~~~
code_duck
Do you mean in Safari, not Chrome? It so thoroughly doesn't work on my Safari
that I assumed Safari lacks support for the CSS features.

~~~
TazeTSchnitzel
I mean Safari, yes.

~~~
code_duck
Interesting, I updated to the latest version and it still just barely starts
to load on Safari before crashing.

------
matthijs_
Do look at his (Gerard Ferrandez) other work:
[http://www.dhteumeuleu.com/index](http://www.dhteumeuleu.com/index)

Amazing stuff in there.

------
NanoWar
This is also very nice: [http://www.dhteumeuleu.com/the-momentum-
equation](http://www.dhteumeuleu.com/the-momentum-equation)

------
caniscrator
This apparently seems authored by vasanthk 8 days ago (see github link).
[http://git.io/AY78](http://git.io/AY78)

~~~
tpabla
From github "Inspired by Gerard Ferrandez's 3D experiment. Thank you." And if
you go to the about url of this story it appears to be Gerard Ferrandez's
personal site.
([http://www.dhteumeuleu.com/about](http://www.dhteumeuleu.com/about))

~~~
caniscrator
Got it. Thanks.

------
Kiro
How can this be achieved with so little code? I was expecting thousands of
lines. It's like 100.

~~~
TazeTSchnitzel
If you have a look at the scene (with Inspect Element), it's actually pretty
simple. It's six walls (each an image), and each of the four sides also has
another 5 walls behind it (each also an image) with a statue (image).

That, combined with how CSS 3D transforms let you describe 3D graphics in a
declarative way (there's an image at some position with some rotation), rather
than in an imperative way (bind the buffer, link the shader, do the 3D
rendering dance, draw this thing at some position I bound and some rotation I
chose, etc.), allows it to be very small.

As always, while declarative programming doesn't lead to brilliant
performance, it produces much nicer code and it's much easier to write.

------
jasonlfunk
This is cool. I'm freaked out that the statue is in the reflections but not in
the room....

~~~
Raphmedia
What if... you are the statue?

~~~
grimmdude
_mind blown_

------
geppetto
On linux it's very slow and has glitches on firefox 45 (iceweasel); good on
chromium.

------
tambourine_man
Really nice.

Some glitches in desktop Safari 8 and it crashes my poor iPhone 4S repeatedly.

------
mattdesl
IPhone 5s, ios 8: crashes the page, then forces a system reboot. :/

~~~
frik
iPad 2 iOS 6, stable

------
zaroth
Do not look away. Do not blink.

Quite beautiful, code and result.

~~~
SXX
Once I see the demo I had exactly same feeling!

So I made this: [http://demos-sxx.rhcloud.com/apparently-
transparent/](http://demos-sxx.rhcloud.com/apparently-transparent/)

~~~
TazeTSchnitzel
When I try to load it, the images only load part-way. :(

------
rafaqueque
Insane.

------
udswagz
wow, is that just pure css ? or something else ? awesome dude !

~~~
kowdermeister
Rendering us CSS3 based, but there's some JS handling the camera, mouse and
stuff.

