I really need to pay more attention. Almomst a year ago, THREE.js released the r67 version, which removed the concept of centroids. This made part 3 of Artsy break. I used centroids and the
Mesh.calculateCentroid function, not because I needed to, but because some tutorial told me I should.
For now, I have removed the calls to
calculateCentroid and done some small changes to at least get Part 3 to start. Stay posted!
Google Chrome still has a long way to go when rendering stuff that is a just little bit more advanced. Experimenting with CSS3 3D Transforms.
I placed a
video element on a
div element that rotates in 3D using CSS3 3D Transforms and CSS3 Transitions. In Safari, everything renders smoothly, even when the video is playing! In Chrome (I’m using Google Chrome 9 Beta), the entire
div containing the
video disappears while the transition is running.
That experiment led to more experimenting, and suddenly I had a fully functioning page flipping effect – almost purely done in CSS. Using a simple combination of
-webkit-transform went a very long way.
Actually, the contents of the project explains itself. If you are using Google Chrome or Desktop Safari on Windows or Mac, use the scroll wheel to flip through pages, or click on a page. If you are on an iOS device, flick a page to go forward or backward.
Please note! This works best on Safari and on iOS devices. Google Chrome does support CSS 3D Transforms, but only if you actively enable it. Type
about:flags into the address bar of your Google Chrome browser, and click Enable for GPU Accelerated Compositing to enable 3D CSS in Chrome, then restart the browser.
The experiment is called CSS Flip. Please try it out now on demo.atornblad.se/cssflip and tell me what you think.