ascading StyleSheets (CSS)is without doubtone ofthe most enjoyable and easy tolearnlanguages onthe web. With the power of CSS3, we can create animations that only JavaScript could manage. And when we look over the world wide web, we see plenty of (if not all) websites using some type of animation that CSS is powering. How many times have we seen complex hover effects, �lip effects and other elements transforming into eye-catching animations? So CSS has come a long way and any web designer/front-end developer worth their salt would at least be able to add some animation using it.
In this tutorial we will learn how to harness CSS3 and create an eye-catching �lip animation that is inspired by a business card. Let’s say you’re a freelance web designer and need to show your prospective clients your business details or related accounts, in an intuitive way that shows your skills straight away. This can be achieved by using a bit of CSS3. So open up your favourite text editor and let’s get started!
1
.Createa new HTML�ile
Begin by opening up your favourite text editor, such as Sublime or Brackets, and create a new HTML �ile. The �irst bit of HTML to add here is the container, which is sometimes called a wrapper, and give it a class name of ‘container’. This will allow the �inal design to be centred.
<div class=”container”> </div>
2
.Usea checkbox
The �lipping effect will be handled by using a checkbox type, which is used to target the �lip label. Anything inside this label will trigger the �lip animation, which will be created using CSS in a later step.
<input id=”flip” type=”checkbox” name=”flip- card”>
<label for=”flip”> <!-- HTML Goes here --> </label>
3
.Buildthefront
Inside the card class we will build the front of the card. The ‘front_bg’ will be a large ‘WD’ that will �ill the whole background of the front. Then we use a <span> tag to include a name and �inish up by adding the profession.
4
.Build theback
At the back of the card we will have �ive icons together with the names of each one. These will act as links, too, and can be anything you want. Perhaps add in your Behance account to show off your personal por tfolio.
<div class=”back”>
<div class=”left_back”></div> <div class=”item”>
<a href=”#” target=”_blank”><i class=”fa fa-bookmark”></i>Web Designer Mag</a> </div>
<div class=”item”>
<a href=”#” target=”_blank”><i class=”fa fa-twitter”></i>Twitter</a>
</div>
<div class=”item”>
<a href=”#” target=”_blank”><i class=”fa fa-codepen”></i>Codepen</a>
</div>
<div class=”item”>
<a href=”#” target=”_blank”><i class=”fa fa-github”></i>GitHub</a>
</div>
<div class=”item”>
<a href=”#” target=”_blank”><i class=”fa fa-dribbble”></i>Dribbble</a>
</div>
</div><!-- End back --> </div><!-- End Card --> </label>
</div><!-- End container -->
5
.Specify boxsizing
One of the most unfavourable things about layout with CSS is the relationship of width and padding. Specifying ‘box-sizing’ on all elements will give the desired box model. Then remove text decoration on all anchor tags.
C
* { box-sizing: border-box; } a { text-decoration: none;}6
.Style thebody
The next step is to set some styles to the body. It is advised to keep some of the styles fairly simple, however, we will also use the ‘repeating-radial-gradient’ function, which will allow us to create more advanced colours for the background.
body {
font-family: “Open Sans”; line-height: 1.618em; color: #444;
background-color: #2c2c2c;
background-image: repeating-radial-gradient( circle, #3a3a3a, #3a3a3a 45%,
transparent 45%, transparent 60%, #3a3a3a 60%, #3a3a3a 100% ); background-size: 10px 10px;}
7
.Centrethecard
Using the container class, we can add some CSS that will centre the whole card on the page. We’ve used the ‘rem’ unit here and this will be explained in more detail later in the tutorial (page 57). One thing to make sure of is to add some margins both to the top and bottom.
.container { max-width: 50rem; width: 100%; margin: 5rem auto;
Left
TheskeletonHTML has nowbeen added,together with the content and links
Topleft
Thebackground has nowbeen styledand there is a nice patterned background to addinterestto the page
Topright
The‘click to �lip’ call to actionis nowlookinggood,with the large WD �illing up thebackground
preserve-3d
When applied to an element in CSS, the preserve-3d property is used to determine if the children of that element should be positioned in the 3D space.
55
text-align: center; }
8
.Setthetransfer style
First of all we will need to make sure our checkbox isn’t showing by specifying the #�lip ID as ‘display: none’. Next some heightand widthwill be added butmore importantly,the transferstyle will be set to ‘preserve-3d’. This will allow thecard torotate in 3D space.
#flip { display: none; } .card { padding: 0; display: block; width: 32rem; height: 20rem; margin: 0 auto; transform-style: preserve-3d;}
9
.Stylethe front
Nextwe needto add somestyles tothefrontof the businesscard.Makesurethatthe over�lowis hidden so that anyover�lowing content will be clipped outof the visiblearea.Now give it 100% heightand width. Then �inish off by giving it a nice drop shadowusing the ‘box-shadow’ property. .front, .back { overflow: hidden; position: absolute;
Tutorials
Create a business card flip effect with CSS
width: 100%; height: 100%;
box-shadow: rgba(0,0,0,0.2) 0 0 3rem 0, rgba(0,0,0,0.1) 0 0 1rem 0;}
10
.Add more styles
Now we can give the front of the business card a basic background colour, make all the corners rounded and set the font colour. And because we have used ‘preserve-3d’, we can add in the ‘translateZ’ property to give the impression of a bit of thickness to the business card, when it is �lipped over.
.front {
transform: translateZ(2px); background: #a3ba60; border-radius: 2rem 2rem; color: #eaf5d7;}
11.Create checked state
Now it is time to create a couple of checked states. The �irst one will be to check whether or not the checkbox (#�lip) is checked (clicked on). If it is, we will activate the rest of the CSS. So if it is checked it looks for it’s direct sibling (which is label) and then it looks for a child element with the class ‘card’.
#flip:checked + label > .card { transform: rotateY(180deg); transition: transform 0.25s;}
12
.Not checked state
The second state that we need to test for is when it is not checked (not clicked on). We’re going to use the same child/sibling syntax as we did in the last step and if it is not checked, we want to set things back to zero.
#flip:not(:checked) + label > .card { transform: rotateY(0deg);
transition: transform 0.25s;}