All videos

Exaggerate depth using Z-scale

Trouble with this video? YouTube may be blocking it for you. Watch it directly on YouTube instead.

Exaggerate depth using Z-scale

You can create depth to elements on your site using scaleZ. Scaling along the z-axis lets us exaggerate the appearance of depth. In this lesson we cover how to create an exploding card on hover using scaleZ.

Video details

Duration

4:09

Topic

Design & build

Continue watching

Exaggerate depth using Z-scale - 图1<h3>Migrate a site to Webflow</h3>1:16:53

Exaggerate depth using Z-scale - 图2<h3>Cursor follow interactions</h3>10:25

Exaggerate depth using Z-scale - 图3<h3>Build a cursor-following 3D button</h3>5:15

Exaggerate depth using Z-scale - 图4<h3>Webflow MCP: Build an FAQ accordion with Claude</h3>8:19

Exaggerate depth using Z-scale - 图5<h3>Page load interaction</h3>9:43

{
  "@context": "https://schema.org",
  "@type": "VideoObject",
  "name": "Exaggerate depth using Z-scale",
  "description": "Scaling along the z-axis lets us exaggerate the appearance of depth along the z-axis. In this lesson we cover how to create an exploding card on hover using scaleZ.",
  "url": "https://university.webflow.com/videos/exaggerate-depth-using-z-scale",
  "thumbnailUrl": "https://cdn.prod.website-files.com/64949e4863d96e26a1da8386/64b945aeed9c3dd21e4e0708_613693682408f077ecbc3fa3_Frame-20614.webp",
  "duration": "4:09",
  "uploadDate": "2026-07-15T20:51:09.709Z",
  "contentUrl": "https://www.youtube.com/watch?v=dzR1Kyv_kSM",
  "embedUrl": "https://www.youtube.com/embed/dzR1Kyv_kSM",
  "inLanguage": "en",
  "publisher": {
    "@type": "Organization",
    "name": "Webflow",
    "logo": {
      "@type": "ImageObject",
      "url": "https://assets-global.website-files.com/6009ec03c3b4e33e78af04aa/6516be62e5c189e9d4fa5e8f_webflow-logo.svg"
    }
  },
  "about": {
    "@type": "Thing",
    "name": ""
  }
}