Loading video...

Video Failed to Load

Go Home

hook this 3D CSS card up to device rotation? sure! 👨‍🍳 tip: use the DevTools "Sensors" emulator with "Custom Orientation" to debug/refine before taking it to a real device 👇

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

145,811 subscribers

81,748 views • 10 months ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Want to debug device-controlled CSS parallax effects without using a device? Simulate device orientation in Chrome DevTools 👇
0:27

Want to debug device-controlled CSS parallax effects without using a device? Simulate device orientation in Chrome DevTools 👇

jhey ʕ•ᴥ•ʔ

272,807 views • 2 years ago

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇
0:37

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

149,851 views • 3 years ago

How to add Chrome DevTools MCP to Claude Code (Bookmark this post to follow the setup later) This lets Claude debug your web apps in a real browser... performance traces, network inspection, console errors. Requirements: - Node.js 22+ - Chrome browser In the video below I show you: - How to install the MCP server - How to verify the DevTools tools are available - How to use it with a real performance trace
1:01

How to add Chrome DevTools MCP to Claude Code (Bookmark this post to follow the setup later) This lets Claude debug your web apps in a real browser... performance traces, network inspection, console errors. Requirements: - Node.js 22+ - Chrome browser In the video below I show you: - How to install the MCP server - How to verify the DevTools tools are available - How to use it with a real performance trace

Daniel San

52,315 views • 11 months ago

I Didn’t Expect A Frequency Device To Be This Simple To Use. ⚡️🎵 Choose A Frequency. Press Play. Feel The Difference.✨ Experience It For Yourself 👇
0:35

I Didn’t Expect A Frequency Device To Be This Simple To Use. ⚡️🎵 Choose A Frequency. Press Play. Feel The Difference.✨ Experience It For Yourself 👇

vegastar

10,540 views • 13 days ago

Future CSS Tip! 🔮 You can power micro-interactions with scroll driven animations 😎 Define a range with custom props and hook up to body scroll 📜 .avatar{ animation:shrink; animation-timeline:scroll(root); animation-range:calc(var(--head)*0.9) ...; } CodePen.IO link below! 👇
0:23

Future CSS Tip! 🔮 You can power micro-interactions with scroll driven animations 😎 Define a range with custom props and hook up to body scroll 📜 .avatar{ animation:shrink; animation-timeline:scroll(root); animation-range:calc(var(--head)*0.9) ...; } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

147,052 views • 3 years ago

Scump reacts to device carriers in overload being forced to use a pistol in new update: “That’s a very big change.. the pistol is good this year but now you’re basically 3v4 with the device.. give Dashy the rock.” 🗣️
0:59

Scump reacts to device carriers in overload being forced to use a pistol in new update: “That’s a very big change.. the pistol is good this year but now you’re basically 3v4 with the device.. give Dashy the rock.” 🗣️

CoD Clipped

144,681 views • 9 months ago

This Little Device Generates All The Frequencies In The World. ⚡🎶 Simple To Use. Powerful To Experience. It’s Changing The Way People Listen To Healing Frequencies. 🧠✨ Explore It 👇
0:30

This Little Device Generates All The Frequencies In The World. ⚡🎶 Simple To Use. Powerful To Experience. It’s Changing The Way People Listen To Healing Frequencies. 🧠✨ Explore It 👇

vegastar

17,518 views • 6 months ago

Apparently a Tesla Coil power source inducted field, made equivalent to the Earth’s gravity using Ion proulsion with a rotation flying wheel to gyroscopically keep it stable. This is the famed Graviflyer anti-gravity device by inventor Alexey Chekurkov. YouTube:
2:01

Apparently a Tesla Coil power source inducted field, made equivalent to the Earth’s gravity using Ion proulsion with a rotation flying wheel to gyroscopically keep it stable. This is the famed Graviflyer anti-gravity device by inventor Alexey Chekurkov. YouTube:

Brian Roemmele

659,822 views • 1 year ago

CSS Tip! ✨ You can use background-attachment to fix backgrounds to the viewport 🤙 card { background:radial-gradient(circle at var(--x) var(--y), ...); background-attachment:fixed; } JS to get the cursor position but use the same bg for a spotlight 🔦 CodePen.IO link below 👇
0:20

CSS Tip! ✨ You can use background-attachment to fix backgrounds to the viewport 🤙 card { background:radial-gradient(circle at var(--x) var(--y), ...); background-attachment:fixed; } JS to get the cursor position but use the same bg for a spotlight 🔦 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

490,391 views • 3 years ago

There’s literal magic in your pocket. A device that can connect you to money, skills, and opportunity. And most people use it for entertainment. Inside The Real World, you’ll learn how to use your phone to generate real cash.
0:27

There’s literal magic in your pocket. A device that can connect you to money, skills, and opportunity. And most people use it for entertainment. Inside The Real World, you’ll learn how to use your phone to generate real cash.

THE REAL WORLD Official

11,448 views • 6 months ago

CSS card parallax with pointermove + custom props 🧑‍🍳 <div class=ring style="--i: 2"> .ring { translate: calc(var(--px) * (var(--i) * -2rem)) calc(var(--py) * (var(--i) * 2rem)); } trick: pointer mapping to rotate card in 3D + translate rings 2D for the illusion 🤙 check it 👇
0:25

CSS card parallax with pointermove + custom props 🧑‍🍳 <div class=ring style="--i: 2"> .ring { translate: calc(var(--px) * (var(--i) * -2rem)) calc(var(--py) * (var(--i) * 2rem)); } trick: pointer mapping to rotate card in 3D + translate rings 2D for the illusion 🤙 check it 👇

jhey ʕ•ᴥ•ʔ

306,875 views • 10 months ago

🤸‍♀️ Tip: how to use the #StationRotation model with large class sizes! The trick? A mirror rotation. 🪞 Want to be the first to get tips like this plus access to exclusive templates? Sign up for my email list: #EdChat #EduTwitter
1:25

🤸‍♀️ Tip: how to use the #StationRotation model with large class sizes! The trick? A mirror rotation. 🪞 Want to be the first to get tips like this plus access to exclusive templates? Sign up for my email list: #EdChat #EduTwitter

Dr. Catlin Tucker

16,576 views • 2 years ago

Here’s how to set up your 4G Smart Connect device in easy steps and unlock the ultimate festive connection experience. When you buy the #4GSmartConnect device, it comes with Bonus data
0:54

Here’s how to set up your 4G Smart Connect device in easy steps and unlock the ultimate festive connection experience. When you buy the #4GSmartConnect device, it comes with Bonus data

Airtel Uganda

70,314 views • 1 year ago

Huawei is not a real company. It is an arm of the CCP and a central node in the Party’s strategy to dominate us technologically. We should use all the tools in our kit to constrain Huawei before their operating system is on every device globally.
0:55

Huawei is not a real company. It is an arm of the CCP and a central node in the Party’s strategy to dominate us technologically. We should use all the tools in our kit to constrain Huawei before their operating system is on every device globally.

Mike Gallagher

276,994 views • 1 year ago

Your new iPhone or iPad, set up just the way you like it. 🤩 Here’s how to use your previous iPhone or iPad to automatically set up your new device with Quick Start and iCloud.
2:42

Your new iPhone or iPad, set up just the way you like it. 🤩 Here’s how to use your previous iPhone or iPad to automatically set up your new device with Quick Start and iCloud.

Apple Support

62,814 views • 8 months ago

CSS Tip! 🤙 You could use CSS :has() to power a context-aware custom cursor experience 👆 :root:has(.player:hover) {--active: 1;} .cursor {scale: var(--active);} :root:has(.player:hover > [aria-label="Pause"]) .cursor-pause-icon { display: block; } CodePen.IO link below! 👇
0:33

CSS Tip! 🤙 You could use CSS :has() to power a context-aware custom cursor experience 👆 :root:has(.player:hover) {--active: 1;} .cursor {scale: var(--active);} :root:has(.player:hover > [aria-label="Pause"]) .cursor-pause-icon { display: block; } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

261,705 views • 3 years ago

CARD SKIMMING Meet this device. It is a card skimmer and writer. Capable of reading your card numbers by radio as well reading them by swipe. It uses capable of reading 9 type of cards. Once the magstripe is swiped past the reading head, the embedded data is decoded by the reader to authorise the transaction. Personally I don’t like buying with ATMS or VISAs or Master Cards because of things like this. How sure am I the employee isn’t having this device beside their payment system and can clone and rewrite my card. For this demo, we will use VISA. Carry enough cash if you don’t want to fall victim. Card skimming is still ongoing and the tools are getting advanced.
0:32

CARD SKIMMING Meet this device. It is a card skimmer and writer. Capable of reading your card numbers by radio as well reading them by swipe. It uses capable of reading 9 type of cards. Once the magstripe is swiped past the reading head, the embedded data is decoded by the reader to authorise the transaction. Personally I don’t like buying with ATMS or VISAs or Master Cards because of things like this. How sure am I the employee isn’t having this device beside their payment system and can clone and rewrite my card. For this demo, we will use VISA. Carry enough cash if you don’t want to fall victim. Card skimming is still ongoing and the tools are getting advanced.

Nana Sei Anyemedu

74,526 views • 2 years ago