CSS Parallax Tutorial! AWESOME Effect!

[@mirjalol49]

just awesome, pls keep uploading, i amlearning a lot

[@tweedledumart4154]

Great tutorial! Thank you!

[@CrazyCodingChannel]

Cool tutorial, thnx for video man)

[@MacSaxe]

Fantastic project thank you - going to use this in a project tomorrow, super excited

[@FollowAndrew]

Wonderful!

[@moriahmwilson3003]

Wow - Dev Tube sounds cool!

[@lovemadeinjapan]

And one more: can you also make it work on a touch device?

[@lovemadeinjapan]

Follow up question. If I change the awkward variable name --x-translate to dX, it stops working. Is that a preset variable name? Can't find any info on where it comes from. Second question. If you move into the screen, the planes move to the new position instantly. Do you know how to ease the transitions?

[@MrTiulia]

Nice tutorial, just have no idea why we add all this flexbox stuff to "face" and at the end make it absolute :D

[@lovemadeinjapan]

Nice tutorial, but I ran into a problem. Since you use Rotate 3D, the rectangles deform. So I was trying to use TranslateX/Y instead, but then the translation is the same for every layer. How to fix the translation to be relative?

[@lovemadeinjapan]

I fixed it by moving the translate with calc rules to the individual items and giving them different scaling factors. You have to include the basic scaling in the hover as well, otherwise it will go back to full size on hover. .one{ background:url('image.png'); background-size:cover; transform: translateZ(-8px) scale(0.25); } #wrap:hover .one{ transform: translateZ(-8px) scale(0.25) translateX(calc(var(--x-translate,0)*0.5%)) translateY(calc(var(--y-translate,0)*0.5%)); }