A Pen by tincanxander

Developer
Tincanxander
Size
2,985 Kb
Views
8,096
  1. A Pen by tincanxander Previews
  2. A Pen by tincanxander HTML Codes
  3. A Pen by tincanxander CSS Codes

How do I make an a pen by tincanxander?

What is a a pen by tincanxander? How do you make a a pen by tincanxander? This script and codes were developed by Tincanxander on 07 January 2023, Saturday.

A Pen by tincanxander Previews
IQ Test

A Pen by tincanxander - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by tincanxander</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="scene">	<div class="cube">	<div class="face front"></div>	<div class="face left"></div>	<div class="face right"></div>	<div class="face rear"></div>	<div class="face top"></div>	<div class="face bottom"></div>	</div>
</div>	<div class="shadow"></div>
</body>
</html>

A Pen by tincanxander - Script Codes CSS Codes

body {	background: rgb(100, 164, 254);
}
/*---SCENE & CUBE BOUNCE---*/
.scene { -webkit-animation: bounce 2s ease-in-out infinite; -moz-animation: bounce 2s ease-in-out infinite; -ms-animation: bounce 2s ease-in-out infinite; -o-animation: bounce 2s ease-in-out infinite; animation: bounce 2s ease-in-out infinite; width: 320px;	height: 320px;	margin: auto; -webkit-perspective: 1200; -moz-perspective: 1200; -ms-perspective: 1200; -o-perspective: 1200; perspective: 1200;
}
@-webkit-keyframes bounce {	50% {-webkit-transform: translateY(80px);}
}
@-moz-keyframes bounce {	50% {-moz-transform: translateY(80px);}
}
@-ms-keyframes bounce {	50% {-ms-transform: translateY(80px);}
}
@-o-keyframes bounce {	50% {-o-transform: translateY(80px);}
}
@keyframes bounce {	50% {transform: translateY(80px);}
}
/*---CUBE & CUBE ROTATING---*/
.cube {	-webkit-animation: turn 7s linear infinite; -moz-animation: turn 7s linear infinite;	position: absolute;	width: 320px;	height: 320px;	top: 80px;	left: 0px;	-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d;	-webkit-transform-origin: 160px 160px -160px; -moz-transform-origin: 160px 160px -160px; -ms-transform-origin: 160px 160px -160px; -o-transform-origin: 160px 160px -160px;	transform-origin: 160px 160px -160px;
}
@-webkit-keyframes turn {	100% {-webkit-transform: rotateX(0deg) rotateY(360deg);}
}
@-moz-keyframes turn {	100% {-moz-transform: rotateX(0deg) rotateY(360deg);}
}
/*---PIXEL ART ON CUBE SIDES---*/
.face {	position: absolute;	width: 20px;	height: 20px;	background-color: rgb(125, 125, 125);	box-shadow:	/*1st ROW*/	0px 0px transparent,	20px 0px rgb(125, 125, 125),	40px 0px rgb(125, 125, 125),	60px 0px rgb(125, 125, 125),	80px 0px rgb(125, 125, 125),	100px 0px rgb(125, 125, 125),	120px 0px transparent,	140px 0px rgb(125, 125, 125),	160px 0px rgb(125, 125, 125),	180px 0px rgb(125, 125, 125),	200px 0px transparent,	220px 0px rgb(125, 125, 125),	240px 0px transparent,	260px 0px rgb(94, 121, 125),	280px 0px rgb(125, 125, 125),	300px 0px rgb(94, 121, 125),	/*2nd ROW*/	0px 20px 0px rgba(125, 125, 125, 1),	20px 20px 0px transparent,	40px 20px 0px transparent,	60px 20px 0px transparent,	80px 20px 0px rgba(125, 125, 125, 1),	100px 20px 0px transparent,	120px 20px 0px transparent,	140px 20px 0px transparent,	160px 20px 0px rgba(94, 121, 125, 1),	180px 20px 0px transparent,	200px 20px 0px transparent,	220px 20px 0px transparent,	240px 20px 0px rgba(94, 121, 125, 1),	260px 20px 0px transparent,	280px 20px 0px transparent,	300px 20px 0px rgba(88, 105, 108, 1),	/*3rd ROW*/	0px 40px 0px rgba(125, 125, 125, 1),	20px 40px 0px transparent,	40px 40px 0px transparent,	60px 40px 0px rgba(125, 125, 125, 1),	80px 40px 0px transparent,	100px 40px 0px transparent,	120px 40px 0px transparent,	140px 40px 0px rgba(94, 121, 125, 1),	160px 40px 0px transparent,	180px 40px 0px transparent,	200px 40px 0px transparent,	220px 40px 0px transparent,	240px 40px 0px transparent,	260px 40px 0px transparent,	280px 40px 0px transparent,	300px 40px 0px rgba(88, 105, 108, 1),	/*4th ROW*/	0px 60px 0px transparent,	20px 60px 0px transparent,	40px 60px 0px rgba(125, 125, 125, 1),	60px 60px 0px transparent,	80px 60px 0px transparent,	100px 60px 0px transparent,	120px 60px 0px transparent,	140px 60px 0px transparent,	160px 60px 0px transparent,	180px 60px 0px transparent,	200px 60px 0px transparent,	220px 60px 0px transparent,	240px 60px 0px transparent,	260px 60px 0px transparent,	280px 60px 0px transparent,	300px 60px 0px rgba(88, 105, 108, 1),	/*5th ROW*/	0px 80px 0px rgba(125, 125, 125, 1),	20px 80px 0px transparent,	40px 80px 0px transparent,	60px 80px 0px transparent,	80px 80px 0px transparent,	100px 80px 0px transparent,	120px 80px 0px transparent,	140px 80px 0px transparent,	160px 80px 0px transparent,	180px 80px 0px transparent,	200px 80px 0px transparent,	220px 80px 0px transparent,	240px 80px 0px transparent,	260px 80px 0px transparent,	280px 80px 0px transparent,	300px 80px 0px rgba(88, 105, 108, 1),	/*6th ROW*/	0px 100px 0px rgba(125, 125, 125, 1),	20px 100px 0px transparent,	40px 100px 0px transparent,	60px 100px 0px transparent,	80px 100px 0px transparent,	100px 100px 0px transparent,	120px 100px 0px transparent,	140px 100px 0px transparent,	160px 100px 0px transparent,	180px 100px 0px transparent,	200px 100px 0px transparent,	220px 100px 0px transparent,	240px 100px 0px transparent,	260px 100px 0px transparent,	280px 100px 0px transparent,	300px 100px 0px rgba(88, 105, 108, 1),	/*7th ROW*/	0px 120px 0px rgba(125, 125, 125, 1),	20px 120px 0px transparent,	40px 120px 0px rgba(94, 121, 125, 1),	60px 120px 0px transparent,	80px 120px 0px transparent,	100px 120px 0px transparent,	120px 120px 0px transparent,	140px 120px 0px rgba(94, 121, 125, 1),	160px 120px 0px transparent,	180px 120px 0px transparent,	200px 120px 0px transparent,	220px 120px 0px rgba(94, 121, 125, 1),	240px 120px 0px transparent,	260px 120px 0px transparent,	280px 120px 0px transparent,	300px 120px 0px transparent,	/*8th ROW*/	0px 140px 0px rgba(125, 125, 125, 1),	20px 140px 0px rgba(94, 121, 125, 1),	40px 140px 0px transparent,	60px 140px 0px transparent,	80px 140px 0px transparent,	100px 140px 0px transparent,	120px 140px 0px rgba(94, 121, 125, 1),	140px 140px 0px transparent,	160px 140px 0px transparent,	180px 140px 0px transparent,	200px 140px 0px rgba(125, 125, 125, 1),	220px 140px 0px transparent,	240px 140px 0px transparent,	260px 140px 0px transparent,	280px 140px 0px transparent,	300px 140px 0px transparent,	/*9th ROW*/	0px 160px 0px rgba(125, 125, 125, 1),	20px 160px 0px transparent,	40px 160px 0px transparent,	60px 160px 0px transparent,	80px 160px 0px transparent,	100px 160px 0px rgba(125, 125, 125, 1),	120px 160px 0px transparent,	140px 160px 0px transparent,	160px 160px 0px transparent,	180px 160px 0px rgba(125, 125, 125, 1),	200px 160px 0px transparent,	220px 160px 0px transparent,	240px 160px 0px transparent,	260px 160px 0px transparent,	280px 160px 0px transparent,	300px 160px 0px rgba(88, 105, 108, 1),	/*10th ROW*/	0px 180px 0px rgba(125, 125, 125, 1),	20px 180px 0px transparent,	40px 180px 0px transparent,	60px 180px 0px transparent,	80px 180px 0px rgba(125, 125, 125, 1),	100px 180px 0px transparent,	120px 180px 0px transparent,	140px 180px 0px transparent,	160px 180px 0px transparent,	180px 180px 0px transparent,	200px 180px 0px transparent,	220px 180px 0px transparent,	240px 180px 0px transparent,	260px 180px 0px transparent,	280px 180px 0px transparent,	300px 180px 0px rgba(88, 105, 108, 1),	/*11th ROW*/	0px 200px 0px rgba(125, 125, 125, 1),	20px 200px 0px transparent,	40px 200px 0px transparent,	60px 200px 0px transparent,	80px 200px 0px transparent,	100px 200px 0px transparent,	120px 200px 0px transparent,	140px 200px 0px transparent,	160px 200px 0px transparent,	180px 200px 0px transparent,	200px 200px 0px transparent,	220px 200px 0px transparent,	240px 200px 0px transparent,	260px 200px 0px rgba(94, 121, 125, 1),	280px 200px 0px transparent,	300px 200px 0px transparent,	/*12th ROW*/	0px 220px 0px rgba(125, 125, 125, 1),	20px 220px 0px transparent,	40px 220px 0px transparent,	60px 220px 0px transparent,	80px 220px 0px transparent,	100px 220px 0px transparent,	120px 220px 0px transparent,	140px 220px 0px transparent,	160px 220px 0px transparent,	180px 220px 0px transparent,	200px 220px 0px transparent,	220px 220px 0px transparent,	240px 220px 0px rgba(125, 125, 125, 1),	260px 220px 0px transparent,	280px 220px 0px transparent,	300px 220px 0px rgba(88, 105, 108, 1),	/*13th ROW*/	0px 240px 0px rgba(125, 125, 125, 1),	20px 240px 0px transparent,	40px 240px 0px transparent,	60px 240px 0px transparent,	80px 240px 0px transparent,	100px 240px 0px rgba(94, 121, 125, 1),	120px 240px 0px transparent,	140px 240px 0px transparent,	160px 240px 0px transparent,	180px 240px 0px transparent,	200px 240px 0px transparent,	220px 240px 0px rgba(125, 125, 125, 1),	240px 240px 0px transparent,	260px 240px 0px transparent,	280px 240px 0px transparent,	300px 240px 0px rgba(88, 105, 108, 1),	/*14th ROW*/	0px 260px 0px rgba(125, 125, 125, 1),	20px 260px 0px transparent,	40px 260px 0px transparent,	60px 260px 0px transparent,	80px 260px 0px rgba(94, 121, 125, 1),	100px 260px 0px transparent,	120px 260px 0px transparent,	140px 260px 0px transparent,	160px 260px 0px transparent,	180px 260px 0px transparent,	200px 260px 0px rgba(125, 125, 125, 1),	220px 260px 0px transparent,	240px 260px 0px transparent,	260px 260px 0px transparent,	280px 260px 0px transparent,	300px 260px 0px rgba(88, 105, 108, 1),	/*15th ROW*/	0px 280px 0px rgba(125, 125, 125, 1),	20px 280px 0px transparent,	40px 280px 0px transparent,	60px 280px 0px rgba(94, 121, 125, 1),	80px 280px 0px transparent,	100px 280px 0px transparent,	120px 280px 0px transparent,	140px 280px 0px transparent,	160px 280px 0px transparent,	180px 280px 0px transparent,	200px 280px 0px transparent,	220px 280px 0px transparent,	240px 280px 0px transparent,	260px 280px 0px transparent,	280px 280px 0px transparent,	300px 280px 0px rgba(88, 105, 108, 1),	/*16th ROW*/	0px 300px 0px rgba(94, 121, 125, 1),	20px 300px 0px rgba(88, 105, 108, 1),	40px 300px 0px transparent,	60px 300px 0px rgba(88, 105, 108, 1),	80px 300px 0px rgba(88, 105, 108, 1),	100px 300px 0px transparent,	120px 300px 0px rgba(88, 105, 108, 1),	140px 300px 0px rgba(88, 105, 108, 1),	160px 300px 0px rgba(88, 105, 108, 1),	180px 300px 0px transparent,	200px 300px 0px transparent,	220px 300px 0px rgba(88, 105, 108, 1),	240px 300px 0px rgba(88, 105, 108, 1),	260px 300px 0px rgba(88, 105, 108, 1),	280px 300px 0px rgba(94, 121, 125, 1),	300px 300px 0px rgba(94, 121, 125, 1);
}
/*---CUBE FACES---*/
.face.front {	-webkit-transform: translateZ(10px); -moz-transform: translateZ(10px);
}
.face.left {	-webkit-transform: translateX(-10px) translateZ(-300px) rotateY(-90deg); -moz-transform: translateX(-10px) translateZ(-300px) rotateY(-90deg);
}
.face.right {	-webkit-transform: translateX(310px) rotateY(90deg); -moz-transform: translateX(310px) rotateY(90deg);
}
.face.rear {	-webkit-transform: translateZ(-310px) translateX(300px) rotateY(180deg); -moz-transform: translateZ(-310px) translateX(300px) rotateY(180deg);
}
.face.top {	-webkit-transform: translateY(-10px) translateZ(-300px) rotateX(90deg); -moz-transform: translateY(-10px) translateZ(-300px) rotateX(90deg);
}
.face.bottom {	-webkit-transform: translateY(310px) rotateX(-90deg); -moz-transform: translateY(310px) rotateX(-90deg);
}
/*---SHADOW & SHADOW ANIMATION---*/
.shadow {	-webkit-animation: shadow 2s ease-in-out infinite; -moz-animation: shadow 2s ease-in-out infinite; -ms-animation: shadow 2s ease-in-out infinite; -o-animation: shadow 2s ease-in-out infinite; animation: shadow 2s ease-in-out infinite;	width: 260px;	height: 60px;	border-radius: 130px / 30px;	background-color: rgba(0, 0, 0, .5);	margin: auto;	margin-top: 180px;
}
@-webkit-keyframes shadow {	50% {width: 340px; height: 100px; border-radius: 170px / 50px;}
}
@-moz-keyframes shadow {	50% {width: 340px; height: 100px; border-radius: 170px / 50px;}
}
@-ms-keyframes shadow {	50% {width: 340px; height: 100px; border-radius: 170px / 50px;}
}
@-o-keyframes shadow {	50% {width: 340px; height: 100px; border-radius: 170px / 50px;}
}
@keyframes shadow {	50% {width: 340px; height: 100px; border-radius: 170px / 50px;}
}
A Pen by tincanxander - Script Codes
A Pen by tincanxander - Script Codes
Home Page Home
Developer Tincanxander
Username tincanxander
Uploaded January 07, 2023
Rating 3
Size 2,985 Kb
Views 8,096
Do you need developer help for A Pen by tincanxander?

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!

Tincanxander (tincanxander) Script Codes
Name
David walliams
Scratch
Google
Create amazing Facebook ads 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!