Construct flip cards using transforms

Throughout this tutorial, you will grasp the technique of crafting a basic card flip animation employing CSS 3D transformations — all without the necessity of manual coding. Card rotations serve as an effective means to introduce visual dynamism by unveiling supplementary information. For instance, implementing a card flip animation enables you to highlight more specifics about a merchandise you are marketing.

During this tutorial:

Establish a Segment and Division block to encompass your card picture components
Fashion card front and back picture components
Configure the offspring perspective on the ancestor element
Specify transformation properties on the card picture components
Animate the Card wrapper to pivot upon hover

Erect a Segment and Division block to house your card picture components

To kick things off, append a Segment on your page:

Unveil the Insert elements pane located in the left toolbar
Drag a Segment onto your page

Position a Division block within the recently inserted Segment:

Extract a Division block from the Insert elementspanel and embed it within the Segment previously established
Assign a class to the Division block (e.g., “Card wrapper”)

Fabricate card front and back picture components

To insert and prepare your card picture components:

Drop 2 separate Picture components from the Insert elements pane and situate them within the Card wrapper Division block recently created
Select your initial picture and allot it a Class name of Card front. Redo this process for your subsequent picture, but designate it a Class name of Card back.

To align images atop each other:

Design, configure them to Display: Block. Ensure this adjustment is made for both pictures to have them overlapping.

64b9499368b7496b60478ed4_5fa353181e135257563c6ea0_vmiziuxiwag3iyewvs8jngp0pigv3vnesyqqnjtb9nnrvflbumthuexfxyapj2od6oyqe9qghi3cff4mjpo9gheelutdeagexdgszit9uiiu8kczgtivocr1tugmfjvfbca89rru

Division block. Proceed to Spacing and arrange each image’s left and right margins to Auto. In case you desire a quicker method to center your images, click the Center element horizontally button for an automatic margin setup.

64b9499368b7496b60478ed7_5fa3531740dfed6f790ffa9e_mrmpgbwcjhxnqp2aju_2sdwlt8fu1tpyvkll-9ean2tnpxjkr0mq6wmlebwqxvuai5lglhjxoovnmxxrhw-_e3rm8ocbac0kl4lvfmmtqjptlngrqflhe7pvqe6t8oaoae2hc00u

Design pane > Position, modify each image to Absolute and designate the Upper position.

Having positioned your card images absolutely, both cards are piled. The Card back resides behind Card front.

Click on the Card front image

Navigate to Design

Temporarily alter the Display to None

Establish the progeny perspective on the parent element

Segment previously included on your page? Since it functions as the parent component of the Card wrapper Div block, we must set the section’s Offspring perspective. Enabling this perspective facilitates the display of our transformation in 3D.

Select the Segment
Access the Design pane > Impacts > 2D & 3D transformations
Engage the 3 disclosure dots to unveil Transformation configurations
Beneath Offspring perspective, specify a Distance of 1234 pixels (you can always fine-tune this subsequently to match your desired 3D card flip appearance)

Specify transformation attributes on the card image components

Within the Design pane, proceed to Impacts and append a 2D & 3D transformation via the supplement icon

Opt for Rotate and pivot the picture component by 180 degrees along the Y-axis

Revisit Impacts > 2D & 3D transformations
Click the 3 disclosure dots to exhibit Transformation configurations
Designate Backface as Hidden

64b9499368b7496b60478ee0_5fa3531733cc26930e577454_unvjfh0tc2_fr-mxgqc9fznwqe0qzsr1plfe7mp9bpvqlp9lcx-e_0rg85nwn4dyawxkkpygtmcvz9jo5exb8qnkethxosjuuimykcyl39o_sy33stxaiabhcr_aouzgqeyewn_f

Select the Card front picture component

Adjust the Display to Block

Single out the Card front component.

Head to Impacts > 2D & 3D transformations

Click the 3 disclosure dots to unlock Transformation settings

Determine Backface as Hidden

Animate the card wrapper to pivot upon hover

Access the Selector field for the Card wrapper Division block
Opt for the Hover effect from the Selections drop-down list

64b9499368b7496b60478eda_5fa35317baa095abece97044_ux3rlkib4kh_ing-zmig0fcn8uwphpncn_rjfj6au0amw63eomm0oobrequcby-mndxygv15tlfh3-rwxeu4llutmfkwpdysl-sg5hnlnvpo6tuw1xedo-q67wpkcueatrencyxs

Activate the Hover effect and navigate to Modifications > 2D & 3D transformations
Hit the + sign and opt for the Rotate choice
Adjust the Card wrapper to rotate 180 degrees on the Y-axis

64b9499368b7496b60478edd_5fa3531819b964b80c89341b_kdtlitm9vjry3i434o4nakn4mphtpmdlzj6pemc41lqqdumv8kwvvr-wcbg3h8xgrztqdcgnagymnz3ahlanwtgk-m-fjgikwjveb3g6tjn8oqdmmzd51f1t8jucaj4wal5ez65c

In order to witness the flip animation you have created, revert back to the initial state of the Card wrapper Division block by selecting the Mode as Inactive.

Finally, incorporate a transition to the Card wrapper Division block.

Access the Appearance panel > Modifications > Transitions
Append a new transition using the additional button
From the Variety drop-down list, opt for Modification
Include a duration of 1000 milliseconds

It’s time to rejoice — you have completed the task! Click on the preview button in the Designer to examine your card flip in motion. Hover over the card and exit to witness the card flip transition in action! Exhilarating!

Associated resources

‍Read more about 2D and 3D Transformations
Discover more about 3D Perspective

‍

Author
Recent Posts

Ewan Mak

Webflow Expert at Tenten

Webflow expert and frontend developer with 4+ years of experience. I bring a versatile skillset (HTML, CSS, JS, Figma, Adobe) to craft exceptional Webflow experiences. 70+ projects honed my ability to seamlessly blend custom code and visual development. Organized, deadline-driven, and passionate about growth, I excel in dynamic environments. Let's push boundaries and create something amazing.