Discover the best rotate websites created by professional designers. Get inspired and start planning your perfect rotate web design today!

Jonas Arleth

A 3D scroll animation that lets you slowly rotate a tablet towards the viewer while scrolling. You can even use animated videos instead of a static image. I use this setup in one of my case studies in my portfolio.

Watch the Tutorial: 
https://youtu.be/yX_KhCuMx_Q

3D Tablet Scroll Animation in Webflow | Free Template

WebDev For You

This interaction showcases a unique hover animation when hovering over the images. This interaction can be used for blog cards, or any other type of card where the user can click to go to another page.

WebDev For You - Interaction #140

The slider component in Webflow can also be extended with an individual animation. This way you can give each slideshow its own character. 

This cloneable is a splitscreen gallery in which the slideshow automatically rotates through different collages and animates each slide with its own transition.

You could use a grid inside of each slide as well.

Watch the Tutorial here: 
https://youtu.be/IvxswB5jy-w

Custom Slider Autoplay Gallery Animation

Kai Jolly

Webfonic Solids

Welcome to daily interaction #103!

This demo showcases a card with a call-to-action (CTA) button that appears at an angle when the user hovers. This can be a great way to let users know that when they click they will be taken to another page.

To create this animation I first created a card wrapper with the elements in it. I set the card wrapper to a position of relative. I then placed a div block inside of the card wrapper and set the position to absolute and 50% width and 120% height so that I could angle it in and not lose height at the top. I then moved this div block 100% to the right from the card. With interactions I rotated this div block -10 degrees. I also placed an arrow in the slanted div block and rotated the arrow 10 degrees to offset the -10 angle. The border also changes color on hover.

Happy Webflowing!

Inspired by: https://codepen.io/andrewsims/pen/mQoYwz

If you'd like more information on how this interaction was accomplished be sure to join the Slack Community!

WebDev For You - Daily Interaction #103

Welcome to Daily Interaction #129.

This demo showcases a 180° project card animation on hover and click.

With this effect stars scale in and out behind the image. Also on mouse move the image moves around the card. When you click on the card the card rotate 180 degrees to reveal the more information.

For the stars I created a 6x8 grid of 50x50 blocks and added two div blocks inside to create the cross. Then in interactions I have them rotate, scale, and loop on hover. On hover out the crosses go back to their original size and stop rotating. For the image moving I added a mouse move over element interaction and just moved the image 20px to each side as the mouse moved around the card. On click I added a rotation to the card, so I made sure to place the card in a 3d-wrapper and added child perspective to it. Then inside of the card wrapper I added a front and back div to represent the front and back of the card.

WebDev For You - Daily Interaction #129

Welcome to Daily Interaction #134.

This demo showcases a parallax card animation on mouse move.

With this effect a gradient overlay moves with the mouse on hover, and a border moves in the opposite direction. The text also moves and rotates left and right with the mouse.

The effect was achieved by placing the gradient overlay and border within the card wrapper. The text was placed in the bottom right of the border div using flexbox. Then in interactions I added a 'mouse move over element' interaction and had the elements move and rotate on the x and y axis when the user moves their mouse over the card wrapper.

Inspired by: https://tympanus.net/Development/TiltHoverEffects/

Images from: Unsplash.com

To view more daily interactions and premium content visit:
https://www.webdevforyou.com/

WebDev For You - Daily Interaction #134

Welcome to Daily Interaction #130.

This demo showcases a blog card animation on hover.

With this effect the image rotates, a color overlay appears, and the date of the blog post appears on hover. The summary panel below also moves up. When hovering over the 'Read More' button the background and text changes color.

I first added all of the elements and then animated via interactions. For the image I placed it inside of an image wrapper and set the overflow of the wrapper to hidden. I then set the width and height of the image to 150% so that when it rotates it is still visible inside of the image wrapper.

Inspired by: https://codepen.io/ChuiSauCE/pen/KGpQbe

Daily interactions will resume on Monday June 3rd.

To view more daily interactions and premium content visit:
https://www.webdevforyou.com/

WebDev For You - Daily Interaction #130

Abdul Wahab

This is our 5th cloneable design! 🎉🚀 Use it for free and do whatever you want with it. 

Check it out: https://animated-cursor-1.webflow.io/. 
Cursor animations can be a simple way to enhance your site experience through delightful interactions.

This template is made with: 
✔️ Monument expanded Font  

Follow me for more Webflow freebies in the future 💙

Animated Cursor — Cloneable # 5

Marc Tiedemann

I like the way the text rotates on the Webflow Homepage and since I couldn't find any existing resources I recreated it.

Rotate Text Webflow Style

Bradley Stallcup

Minim Cards Collection 1

Need some sweet Call To Actions for the bottom of your page? Well you can put it where you want, but I reckon these may just come in handy.

Minim CTA Pack 1

Eddie Mathews

Yet another modification ... this is what i originally wanted to do with this menu button ... to have the items rotate around the menu button.  Enjoy :)

component-78

Perty neat little circles that rotate on hover and as your scroll. Could be good for selecting services? I don't know. You tell me.

Rotating Service Circles

Web Bae

In this video we'll explore a cool vertical marquee text effect as seen on the website of PeakSpan Capital. We'll look at how a beginner might go about building this at first go and then have a look to see if we can make some improvements. By utilizing EM and % units, we'll find that we can make the design more responsive across breakpoints and flexible to design changes. We'll also explore an accessibility concern with multiple h1 elements on the page.

Vertical Text Marquee

Welcome to Daily Interaction #106.

This demo showcases a reverse image effect on mouse move. There are two images facing the opposite direction on both sides of the screen and when you move your mouse on the x-axis the images get closer or further apart. It is a very simple effect, but I think it can be very effective. To use the same image and save on load time I flipped the right image horizontally on the y-axis within the interaction. Both the left and right image are in a wrapper with an overflow set to hidden. I then applied a 'mouse move in viewport' interaction to move both images in and out as the mouse moved on the x-axis.

Demo requires mouse or trackpad input.

To view more daily interactions and premium content visit:
https://www.webdevforyou.com/

If you'd like more information on how this interaction was accomplished be sure to join the Slack Community!

WebDev For You - Daily Interaction #106

Francesco Castronuovo

Hi my gorgeous friends of Webflow,

This project is meant to show that with absolutely no code or svgs, you can create a fancy broken text effect.

You only need a bit of text and some divs. Then, mix those with some move and rotate transforms, use the overflow property, and you're good to go!

Enjoy and feel free to leave a comment! :)

Have an awesome Webflow journey y'all,
Francesco

P.S. Feel free to visit my YouTube channel:
https://www.youtube.com/@francescocastronuovo

No Code Broken Text Effect

KajalValand

Here is a clean and simple micro site with smooth, simple, achievable animation. 

To showcase images i've used CMS with a drag-able(custom code ) slider and interactions with rotation and scale.

Images are from Unsplash.com.

Please do let me know if you have any other suggestions for a clone-able. 👍🏽

Like and Follow  😊 💛
-----------------------------------------------------------------------

Contact me for collaborations - message me on: 
kajalvaland.com or you can find me on Twitter: https://twitter.com/KajValand

spacekv

1070795817

1316201488

1316201489

1592612642

1726628865

173927913

1863160016

1905118106

2144870841

2216482092

2339906037

2351366352

2355632600

https://s3.amazonaws.com/webflow-dev-assets/66fd83b6cc0c8c6ed0e398e6%2Fcontent.json

2401116685

2486364096

2546957535

2789269995

2857348505

2903381045

User Accounts will no longer be available on January 29, 2026.

Visit Webflow’s Help Center for migration guidance and more info.

3023147062

3106924665

3112069432

3258716925

3289310561

3313039722

3315729993

3410497685

3557227276

3590523401

3591394191

3913199261

3934148661

4092855684

4103643638

4206156914

451433404

504462606

622649767

622649768

657188092

665836192

737109165

772001133

882147072

938734410

1004117952

1049811722

105340574

1120744071

1131151533

1157563538

1171384976

1197475705

1197746894

1229056119

1234765101

1236803103

1290849437

1292405251

130043074

1304541205

1306352991

1322655470

1336067073

1350250754

1380896143

1386092744

1406455659

1418395020

1433303746

143629253

1455163268

1455742168

1457420719

1458975701

1499868407

1501922903

1545754914

1557989767

1568482678

1575119218

1662541974

1665126082

1680201874

1680586027

1694411451

1701648875

1753134293

1775656907

183596474

1857805694

187681422

1925696804

1928608458

1944913766

1968719184

2031799369

2084850560

2085494476

2091902242

21336891

214950889

2161096664

216777687

2182233325

2184630439

2187198051

2193997669

2198334698

2224902271

224017973

2253187682

2276264697

23146391

2332153945

2340184165

2348917033

2354820654

2361218180

2378130748

2388854597

2403993584

2458909760

2465149363

2487845889

2494249199

2519229707

2524380347

2526987152

2529408901

2550320370

2605123638

2608516337

2636510003

2663519398

2685146257

2709133931

2714120603

2715927287

2718510159

274817750

2753418190

2759911512

2776696732

2781896974

2825044701

2860045578

2867851366

2886076224

2886816758

2891962111

2902992011

2907110567

Best Rotate Websites | Free Examples & Designs

Discover Rotate websites
built by the Webflow community

Browse, clone, and customize thousands of websites #MadeinWebflow. Looking for templates?

Discover Rotate websites built by the Webflow community

Browse, clone, and customize thousands of websites #MadeinWebflow. Looking for templates?

Discover Rotate websites
built by the Webflow community