CSS3 “Curved Surface” 3D Transform/Perspective Help?

This is a simple "poster wall" with 9 divs - all the divs are absolutely positioned within a wrapper div. In the wrapper div, you add: -webkit-transform-style:preserve-3d; This is what actually creates the 3D effect. You can optionally add a perspective setting depending on the degree of foreshortening you want.

And in the CSS, you create div styling that looks like this for the left hand images: -webkit-transform: rotateX(0deg) rotateY(30deg) rotateZ(0deg); -webkit-transform-origin: 100% 0%; and for the right hand images: -webkit-transform: rotateX(0deg) rotateY(-30deg) rotateZ(0deg); -webkit-transform-origin: 0% 0%; NOTE: Only Safari and iOS support preserve-3D right now. For other browsers, you'll have to manually add perspective by manually scaling and skewing the images, and it never looks exactly right.

I know it's not exactly what you want, but just threw this together and want to see if it's in the general direction: jsfiddle.net/cwolves/mwxNK/2.

I tweaked it a little bit too with my version here: jsfiddle.net/sJCAh/ Not exactly what the colourful pic demonstrates though :-).

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.

Related Questions