It is necessary to make a collage of pictures of about this type: enter image description here

I know that the layers can be arranged using z-index , but I do not know how to give these pictures a circle shape, as in the picture, tell me how it can be done

  • translate3d and z-index ? - user207618
  • I searched, but how to do exactly what I needed I did not find - Denis
  • learn more about transformations, examples desandro.imtqy.com/3dtransforms/docs/… - Jean-Claude
  • Did you mean photoshop? - user33274
  • @ Jean-Claude site is not available, in general, he figured out himself, thanks. - Denis

1 answer 1

Obviously, no one will do it for you. Here they help, but do not. Learn in more detail the properties of transformation, perspective, movement and positioning, for example, here or in other sources, of which hundreds http://html5book.ru/css3-transform/

 <!DOCTYPE html> <html> <head> <title>titile</title> <meta charset="utf-8"> <style> div { background-image: url("http://ibiza-rent-a-car-today.com/images/prepaid-creditcard.jpg"); height: 154px; width: 250px; position: absolute; } .div1 { transform: perspective(600px) rotateY(0deg) rotateX(45deg); } .div2 { transform: translateY(75px) translateX(45px) perspective(600px) rotateX(45deg) rotate(25deg); } .div3 { transform: translateY(150px) translateX(45px) perspective(600px) rotateX(45deg) rotate(50deg); } .div4 { transform: translateY(225px) translateX(-45px) translateX(45px) perspective(600px) rotateX(45deg) rotate(75deg); } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <div class="div4"></div> </body> </html>

  • this is understandable, and I needed an example, since I myself did not find it. - Denis