3D VR Card using HTML, CSS(SCSS) and JavaScript - Coding Torque

byPiyush Patil -
0
3D VR Card using HTML, CSS and JavaScript

Hello Guys! Welcome to Coding Torque. In this blog, we are going to make a 3D VR card using HTML, CSS, and JavaScript. You must create this if you are a beginner and learning HTML and CSS.

Before we start, here are some more projects for you:

1. Todo App using JavaScript

2. Tip Calculator using JavaScript

3. QR Code Generator using JavaScript

I would recommend you don't just copy and paste the code, just look at the code and type by understanding it.


Let's go step by step:

Step 1: HTML Code

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>3D VR Card using HTML, CSS and JavaScript - @codingtorque</title>

    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
</head>

<body>
        <!-- further code in next block -->

        <!-- JQuery CDN -->
        <script src="https://code.jquery.com/jquery-3.6.1.js"
        integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>

        <script src="script.js"></script>
</body>

</html>


Paste the below code in your <body> tag 

<div id="top">
    <div class="perspective">
        <div class="card">
            <div class="thumb"
                style="background-image: url(https://images.unsplash.com/photo-1478358161113-b0e11994a36b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a11da19e81415e5a81029aade9df7774&auto=format&fit=crop&w=668&q=80)">
            </div>
            <h2>Virtual Reality</h2>
            <span>Dreaming with your eyes open!</span>
        </div>
    </div>
</div>

<div class="dribbble">
    <a href="https://dribbble.com/albanbujupaj" target="_blank">
        <span class="icon"><img width="30" src="https://image.flaticon.com/icons/svg/179/179316.svg" alt=""></span><span
            class="caption">follow me on dribbble</span></a>
</div>


Output Till Now


Step 2: CSS(SCSS) Code

Create a file style.scss and paste the code below.
Note: If you don't know how to run scss please check this article: How to use SASS in HTML  

body {
    background: linear-gradient(to right, #ffffff, #f8dce2);
    font-family: 'Varela Round', sans-serif;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.perspective {
    width: 100%;
    perspective: 1000px;
}

#top {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.card {
    width: 270px;
    height: 413px;
    margin: auto;
    box-shadow: 0 70px 63px -60px #494848;
    transform-style: preserve-3d;
    transition: transform .05s linear;

    .thumb {
        background-size: cover;
        height: 100%;
        width: 100%;
        border-radius: 15px;

        &:after {
            background: inherit;
            content: '';
            display: block;
            position: absolute;
            left: -60px;
            top: 40px;
            width: 100%;
            height: 108%;
            z-index: -1;
            filter: blur(55px);
        }
    }

    h2 {
        position: absolute;
        top: 0;
        left: -60px;
        font-size: 40px;
        font-weight: 100;
        transform: translateZ(80px);
    }

    span {
        position: absolute;
        bottom: 40px;
        right: -280px;
        font-size: 37px;
        font-weight: 600;
        transform: translateZ(35px);
    }
}

.dribbble {
    position: fixed;
    top: 25px;
    right: 25px;

    & > a {
        font-size: 12px;
        text-transform: uppercase;
        text-decoration: none;
        color: #ec4989;
    }
}

img {
    margin: auto;
    display: block;
    border-radius: 15px;
}

Output Till Now

3D VR Card using HTML, CSS and JavaScript

Step 3: JavaScript Code

Create a file script.js and paste the code below.

Note: You have to import JQuery library in your HTML body before the javascript code. (I have already imported JQuery CDN in the above starter template). 

var o = $(".card");
$("#top").on("mousemove", function (t) {
    var e = -($(window).innerWidth() / 2 - t.pageX) / 30,
        n = ($(window).innerHeight() / 2 - t.pageY) / 10;
    o.attr("style", "transform: rotateY(" + e + "deg) rotateX(" + n + "deg);-webkit-transform: rotateY(" + e + "deg) rotateX(" + n + "deg);-moz-transform: rotateY(" + e + "deg) rotateX(" + n + "deg)")
})

Code Credits: @abujupaj

Written by: Coding Torque | Piyush Patil

If you want me to code any project or post any specific post, feel free to DM me at IG @code.scientist or @codingtorque

If you have any doubts or any project ideas feel free to Contact Us 

Hope you find this post helpful💖 
 
 Follow us on Instagram for more projects like this👨‍💻 

Tags:

Post a Comment

Previous Post Next Post