Dope 3D Animation [ Re-design Walkthrough]

by | Jan 21, 2021 | 0 comments

Dope 3D Animation [ Re-design Walkthrough]

by | Jan 21, 2021 | CSS Tips and Tricks | 0 comments



In this video, I walk you through my process of creating a custom UI component design using vanilla Javascript and CSS. Watch and learn as I re-design 1 product card from Lamar “Action” Jackson’s fashion line: era8 apparel!

Demo – https://rhyanvargas.github.io/css-3d-animation/
codepen – https://codepen.io/rhyanv/pen/bGwzJVL
github – https://github.com/rhyanvargas/css-3d-animation/blob/master/README.md

❤️ Do you like this form of content? Smash that like button & subscribe to my channel for more content to help you level up your coding !

🔔 **** Follow Me: *****
LinkedIn – https://www.linkedin.com/in/rhyanvargas/
Github – https://github.com/rhyanvargas/
Instagram – https://www.instagram.com/rhyguydigital/
Codepen – https://codepen.io/rhyanv/organize/

👋 *** ABOUT RHYGUY***
I help artists and creatives level up their coding and soft skills to land their first coding job! I do this through coding/design tutorials, process walkthroughs, and helpful career tips 🤙

⚙️ *** GEAR USED (when available, I use affiliate links and may earn a commission)***

Apple Mac Mini (3.0GHz 6-core 8th-Generation Intel Core i5 Processor, 8GB RAM, 512GB) – Previous Model – https://amzn.to/3sPnfzA

AUPHONIX PRO Black Shock Mount for Blue Yeti – Advanced Vibration Blocking, Noise Repelling Shockmount System for Blue Yeti Original Snowball & Pro – Ultra-Portable Lightweight Microphone Shock Mount – https://amzn.to/3sPnFpE

InnoGear Microphone Arm Stand, Heavy Duty Mic Arm Microphone Stand Suspension Scissor Boom Stands with Mic Clip and Cable Ties for Blue Yeti Snowball and Blue Yeti Nano(Medium) – https://amzn.to/3ix4qw7

Phone Holder Bed Gooseneck Mount – Lamicall Flexible Arm 360 Mount Clip Bracket Clamp Stand for Cell Phone XS Max XR X 8 7 6 Plus 5 4, S10 S9 S8 S7 S6, Overall Length 33.4In(Black) – https://amzn.to/3iss6So

Flexible Power Strip Surge Protector 6Ft 4 Outlet 2USB Suitable for Home and Office. (Black) – https://amzn.to/3bVx2hA

Cxmount Desktop Stand for Mac Mini 2010-2020 – https://amzn.to/3pc44gQ

Philips 272E1CA 27″ curved frameless monitor, Full HD 1080P, 100% sRGB, Adaptive-Sync, Speakers, VESA, 4Yr Advance Replacement Warranty – https://amzn.to/35Y8iRI

Matladin Upgraded Premium Standing Desk Anti-Fatigue Active Wooden Wobble Balance Board, Ergonomic Floor Mats for Long Periods of Standing/Stand Up Desk/Gym/Stability/Foot Rocker Leg Exerciser – https://amzn.to/3qGwkZH

DEVAISE Adjustable Height Standing Desk, 55 inch Sit to Stand Up Desk Workstation with Crank Handle for Office Home, Black – https://amzn.to/3bVxhcu

MacBook Pro Docking Station Dual Monitor MacBook Pro HDMI Adapter,12 in 1 USB C Adapters for MacBook Pro Air Mac HDMI Dock Dongle Dual USB C to Dual HDMI VGA Ethernet AUX 4USB SD/TF100W PD – https://amzn.to/35Wb9e6

VIVO Dual LCD Monitor Desk Mount Stand Heavy Duty Fully Adjustable fits 2 /Two Screens up to 27″ (STAND-V002) – https://amzn.to/390Ql7f

Home Office Chair Mesh Ergonomic Computer Chair with 3D Adjustable Armrests Desk Chair High Back Technical Task Chair – Burgundy – https://amzn.to/2KshIxk

Keychron K2 Wireless Mechanical Keyboard with White LED Backlit/Gateron Blue Switch/Wired USB/Anti Ghosting /84 Key N-Key Rollover, Bluetooth Gaming Keyboard for Mac Windows PC Gamer-Version 2 – https://amzn.to/3bUTOpu

Logitech MX Ergo Wireless Trackball Mouse Adjustable Ergonomic Design, Control and Move Text/Images/Files Between 2 Windows and Apple Mac Computers (Bluetooth or USB), Rechargeable, Graphite – Black – https://amzn.to/2LDqLfH

Newest Blue Yeti USB Microphone with 4 Pickup Patterns, 3 Condenser Capsules, Mic Gain Control & Adjustable Stand for Gaming, Streaming, Podcasting on PC & Mac with GalliumPi Accessories – Silver – https://amzn.to/3qtXtia

source

0 Comments

Submit a Comment

What Our Clients Are Saying

North Burnaby Boxing Club

Thanks so much for all the great work you have done in developing our website Leland!

Manny, North Burnaby Boxing Club

Dieno Digital Marketing Services
5
2018-04-27T01:06:02+00:00

Manny, North Burnaby Boxing Club

Thanks so much for all the great work you have done in developing our website Leland!

JB Consulting

Leland built us a great site at a great price. We can’t say enough about how pleasant it was dealing...

Dave, JB Consulting

Dieno Digital Marketing Services
5
2018-04-27T01:06:57+00:00

Dave, JB Consulting

Leland built us a great site at a great price. We can’t say enough about how pleasant it was dealing with him!

Kelicor Logistics

Leland created my website for my new venture. I found his service to be excellent,was always available to answer my...

Colin, Kelicor Logistics Solutions

Dieno Digital Marketing Services
5
2018-04-27T01:07:34+00:00

Colin, Kelicor Logistics Solutions

Leland created my website for my new venture. I found his service to be excellent,was always available to answer my questions and was always prepared to go the extra mile, in order to ensure my website conveyed it's intended message,, And the cherry on top was it was most affordable. Would definitely recommend. Thanks Leland !

McNeney McNeney Spieker LLP

Dieno Digital has been providing our firm with what we like to call the Royal Package in customer service for...

M, McNeney McNeney Spieker LLP

Dieno Digital Marketing Services
5
2018-04-27T01:08:19+00:00

M, McNeney McNeney Spieker LLP

Dieno Digital has been providing our firm with what we like to call the Royal Package in customer service for over 3 years now. The knowledge and skills Leland brings to the table has increased our business and streamlined our social media platform. Our requests are always dealt with in a timely manner and we are always given options and alternatives to better reach potential new clients. We highly recommend Dieno Digital to increase your life social media presence.
5
4
Dieno Digital Marketing Services
[newsletter_form]
<div class="tnp tnp-subscription"> <form method="post" action="https://www.dienodigital.com/?na=s"> <input type="hidden" name="nlang" value=""><div class="tnp-field tnp-field-firstname"><label for="tnp-name">First name or full name</label> <input class="tnp-name" type="text" name="nn" value=""></div> <div class="tnp-field tnp-field-email"><label for="tnp-email">Email</label> <input class="tnp-email" type="email" name="ne" value="" required></div> <div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit" value="Subscribe" > </div> </form> </div>