Prespectives

Developer
Miguel Ferreira
Size
2,103 Kb
Views
6,072
  1. Prespectives Previews
  2. Prespectives HTML Codes
  3. Prespectives CSS Codes

How do I make an prespectives?

What is a prespectives? How do you make a prespectives? This script and codes were developed by Miguel Ferreira on 26 January 2023, Thursday.

Prespectives Previews
IQ Test

Prespectives - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Prespectives</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <table> <tbody> <tr> <td> <div class="container"> <div class="cube pers250"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </td> <td> <div class="container"> <div class="cube pers350"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </td> <td> <div class="container"> <div class="cube pers500"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> </td> </tr> </tbody>
</table> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Prespectives - Script Codes CSS Codes

/* Shorthand classes for different perspective values */
.pers250 { perspective: 250px; -webkit-perspective: 250px;
}
.pers350 { perspective: 350px; -webkit-perspective: 350px;
}
.pers500 { perspective: 500px; -webkit-perspective: 500px;
}
/* Define the container div, the cube div, and a generic face */ .container { width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;
}
.cube { width: 100%; height: 100%; backface-visibility: visible; perspective-origin: 150% 150%; transform-style: preserve-3d; -webkit-backface-visibility: visible; -webkit-perspective-origin: 150% 150%; -webkit-transform-style: preserve-3d;
}
.face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center;
}
/* Define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translateZ(50px); -webkit-transform: translateZ(50px);
}
.back { background: rgba(0, 255, 0, 1); color: black; transform: rotateY(180deg) translateZ(50px); -webkit-transform: rotateY(180deg) translateZ(50px);
}
.right { background: rgba(196, 0, 0, 0.7); transform: rotateY(90deg) translateZ(50px); -webkit-transform: rotateY(90deg) translateZ(50px);
}
.left { background: rgba(0, 0, 196, 0.7); transform: rotateY(-90deg) translateZ(50px); -webkit-transform: rotateY(-90deg) translateZ(50px);
}
.top { background: rgba(196, 196, 0, 0.7); transform: rotateX(90deg) translateZ(50px); -webkit-transform: rotateX(90deg) translateZ(50px)
}
.bottom { background: rgba(196, 0, 196, 0.7); transform: rotateX(-90deg) translateZ(50px); -webkit-transform: rotateX(-90deg) translateZ(50px);
}
/* Make the table a little nicer */
th, p, td { background-color: #EEEEEE; padding: 10px; font-family: sans-serif; text-align: left;
Prespectives - Script Codes
Prespectives - Script Codes
Home Page Home
Developer Miguel Ferreira
Username angus
Uploaded January 26, 2023
Rating 3
Size 2,103 Kb
Views 6,072
Do you need developer help for Prespectives?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Miguel Ferreira (angus) Script Codes
Name
Comparing values to items in array
Hover menu CSS
Pure Css Menu With Child and Hover concatenation
Slider modelo
A Pen by Miguel Ferreira
Calculator
Dynamic Table Generator
Ripple Click Attempt
Slider
A button that shows the next thing
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!