Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to create Perspective Text using HTML & CSS ?

  • Last Updated : 14 Apr, 2021

In this article, we are going to create an illusion of images below the main image. This is a simple article, we can achieve our target only by using HTML & CSS.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Approach: Create a main div in which we have added a heading tag and then use the selectors in CSS to create the effects.

HTML Code:



  1. First, we create an HTML file(index.html).
  2. After creating the HTML file, we are going to give title to our webpage using <title> tag. It should be placed inside the <head> tag.
  3. Then we link the CSS file that provides all the animations effect to our html. It is also placed inside <head> tag.
  4. Coming to the body section of our HTML code.
    1. Firstly, we are giving heading to our page.
    2. Inside the heading create 3 span to store the data.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>
        <span>geeks</span>
        <span>for</span>
        <span>geeks</span>
    </h1>
</body>
</html>

CSS Code: CSS is used to give different types of animations and effect to our HTML page so that it looks interactive to all users. In CSS, we have to remember the following points-

  • Restore all the browser effects.
  • Use classes and ids to give effects to HTML elements.
  • Use of selectors to select different elements!

CSS




*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
  
body{
    height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
    color: teal;
}
  
h1{
    width: 3em;
    height: 1em;
    font-size: 6em;
    position: relative;
    white-space: nowrap;
    color: transparent;
}
  
h1 span{
    position: absolute;
    background-color: rgb(7, 138, 138);
    color: #000;
}
  
span:nth-child(odd){
    transform: skew(50deg,-20deg) scaleY(0.75);
}
  
span:nth-child(even){
    transform: skew(-5deg,-20deg);
}
  
span:nth-child(1){
    bottom: 1em;
    left: 0.5em;
}
span:nth-child(2){
    top: 0.5em;
    left: 2em;
}
  
span:nth-child(3){
    top: 2em;
    left: 2.5em;
}

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :