Git Product home page Git Product logo

card-tilt's Introduction

Card Tilt Effect with 3D Perspective

This project demonstrates how to create a card tilt effect with a 3D perspective using HTML, CSS, and JavaScript.

Preview

Demo

DEMO

How It Works

The project utilizes the following components:

  • HTML: Defines the structure of the card and its contents.
  • CSS: Adds styles for the card layout, tilt effect, and additional visual enhancements.
  • JavaScript: Implements the tilt effect using the VanillaTilt library to add a dynamic 3D perspective to the card.

Usage

  1. Clone this repository to your local machine:
    git clone https://github.com/vivek20Eng/Card-tilt.git
  2. Open the project directory in Visual Studio Code.
  3. Use the Live Server extension to run the index.html file:
    • Install the Live Server extension if you haven't already.
    • Right-click on the index.html file in the project explorer.
    • Select "Open with Live Server" from the context menu.
  4. Your default web browser should open automatically, displaying the card tilt effect in action.

Screenshots

image1 image2

card-tilt's People

Contributors

viveksz avatar

Stargazers

 avatar  avatar vivekanandan s avatar

Watchers

vivekanandan s avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.