Wireframe Cube

Developer

Size

3,818 Kb

Views

8,096

Wireframe Cube Previews
Wireframe Cube HTML Codes
Wireframe Cube CSS Codes

How do I make an wireframe cube?

What is a wireframe cube? How do you make a wireframe cube? This script and codes were developed by Michael Hobizal on 05 January 2023, Thursday.

Wireframe Cube Previews

Wireframe Cube - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wireframe Cube</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a class='hoverme'> Hover Here
</a>
<div class='container'> <div class='cube'> <div class='half1'> <div class='side s1'></div> <div class='side s2'></div> <div class='side s5'></div> </div> <div class='half2'> <div class='side s3'></div> <div class='side s4'></div> <div class='side s6'></div> </div> </div>
</div>
</body>
</html>

Wireframe Cube - Script Codes CSS Codes

body { background-color: #0b2331; font-family: Helvetica, sans-serif;
}
.cube, .half1, .half2, .container, .side { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d;
}
.container { position: relative; width: 800px; height: 800px; margin: 0 auto; z-index: -999; text-align: center; -webkit-perspective: 40000px; -moz-perspective: 40000px; perspective: 40000px;
}
.hoverme { display: inline-block; background: #ccc; padding: 20px; font-size: 1em; cursor: pointer; opacity: 0.9; position: fixed; z-index: 999; left: 0; top: 0; -webkit-transition: all 10ms ease-in-out; -moz-transition: all 10ms ease-in-out; transition: all 10ms ease-in-out;
}
.hoverme:hover { opacity: 1;
}
.hoverme:hover ~ .container .cube .side:after { -webkit-transform: translate3d(-50%, -50%, 0) rotate(45deg); -moz-transform: translate3d(-50%, -50%, 0) rotate(45deg); -ms-transform: translate3d(-50%, -50%, 0) rotate(45deg); -o-transform: translate3d(-50%, -50%, 0) rotate(45deg); transform: translate3d(-50%, -50%, 0) rotate(45deg);
}
.hoverme:hover ~ .container .cube .side:before { -webkit-transform: translate3d(-50%, -50%, 0) rotate(45deg); -moz-transform: translate3d(-50%, -50%, 0) rotate(45deg); -ms-transform: translate3d(-50%, -50%, 0) rotate(45deg); -o-transform: translate3d(-50%, -50%, 0) rotate(45deg); transform: translate3d(-50%, -50%, 0) rotate(45deg);
}
.cube { margin-top: -100px; width: 800px; height: 800px; -webkit-transform: rotateX(185deg) rotateY(0deg) rotateZ(45deg); -moz-transform: rotateX(185deg) rotateY(0deg) rotateZ(45deg); -ms-transform: rotateX(185deg) rotateY(0deg) rotateZ(45deg); -o-transform: rotateX(185deg) rotateY(0deg) rotateZ(45deg); transform: rotateX(185deg) rotateY(0deg) rotateZ(45deg); -webkit-transform-origin: center; -moz-transform-origin: center; -ms-transform-origin: center; -o-transform-origin: center; transform-origin: center; -webkit-animation: cube 5s forwards infinite; -moz-animation: cube 5s forwards infinite; animation: cube 5s forwards infinite; -webkit-animation-timing-function: cubic-bezier(0.97, 1, 0.66, 0.9); -moz-animation-timing-function: cubic-bezier(0.97, 1, 0.66, 0.9); animation-timing-function: cubic-bezier(0.97, 1, 0.66, 0.9);
}
.half1 { height: 320px; top: 0; position: absolute; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%;
}
.side { width: 160px; height: 160px; border: 1px solid #fff; background: transparent; position: absolute; overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.side:after { content: ''; position: absolute; height: 2px; width: 400px; background: #fff; left: 50%; top: 50%; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); -ms-transform: translate3d(-50%, -50%, 0); -o-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out;
}
.side:before { content: ''; position: absolute; width: 2px; height: 400px; background: #fff; left: 50%; top: 50%; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); -ms-transform: translate3d(-50%, -50%, 0); -o-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out;
}
.s1 { top: 0; left: 320px; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg);
}
.s2 { top: 160px; left: 320px; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%;
}
.s3 { top: 320px; left: 320px; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%;
}
.s4 { top: 480px; left: 320px; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg);
}
.s5 { left: 160px; top: 160px; -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg);
}
.s6 { left: 480px; top: 320px; -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg);
}
@-webkit-keyframes cube { 0% { -webkit-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg); } 12.5% { -webkit-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg); } 25% { -webkit-transform: rotateX(55deg) rotateY(0deg) rotateZ(135deg); } 37.5% { -webkit-transform: rotateX(55deg) rotateY(0deg) rotateZ(135deg); } 50% { -webkit-transform: rotateX(125deg) rotateY(0deg) rotateZ(135deg); } 62.5% { -webkit-transform: rotateX(125deg) rotateY(0deg) rotateZ(135deg); } 75% { -webkit-transform: rotateX(125deg) rotateY(0deg) rotateZ(45deg); } 87.5% { -webkit-transform: rotateX(125deg) rotateY(0deg) rotateZ(45deg); } 100% { -webkit-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg); }
}
@-moz-keyframes cube { 0% { -moz-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg); } 12.5% { -moz-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg); } 25% { -moz-transform: rotateX(55deg) rotateY(0deg) rotateZ(135deg); } 37.5% { -moz-transform: rotateX(55deg) rotateY(0deg) rotateZ(135deg); } 50% { -moz-transform: rotateX(125deg) rotateY(0deg) rotateZ(135deg); } 62.5% { -moz-transform: rotateX(125deg) rotateY(0deg) rotateZ(135deg); } 75% { -moz-transform: rotateX(125deg) rotateY(0deg) rotateZ(45deg); } 87.5% { -moz-transform: rotateX(125deg) rotateY(0deg) rotateZ(45deg); } 100% { -moz-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg); }
}
@keyframes cube { 0% { -webkit-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg); -moz-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg); -ms-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg); -o-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg); transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg); } 12.5% { -webkit-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg); -moz-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg); -ms-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg); -o-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg); transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg); } 25% { -webkit-transform: rotateX(55deg) rotateY(0deg) rotateZ(135deg); -moz-transform: rotateX(55deg) rotateY(0deg) rotateZ(135deg); -ms-transform: rotateX(55deg) rotateY(0deg) rotateZ(135deg); -o-transform: rotateX(55deg) rotateY(0deg) rotateZ(135deg); transform: rotateX(55deg) rotateY(0deg) rotateZ(135deg); } 37.5% { -webkit-transform: rotateX(55deg) rotateY(0deg) rotateZ(135deg); -moz-transform: rotateX(55deg) rotateY(0deg) rotateZ(135deg); -ms-transform: rotateX(55deg) rotateY(0deg) rotateZ(135deg); -o-transform: rotateX(55deg) rotateY(0deg) rotateZ(135deg); transform: rotateX(55deg) rotateY(0deg) rotateZ(135deg); } 50% { -webkit-transform: rotateX(125deg) rotateY(0deg) rotateZ(135deg); -moz-transform: rotateX(125deg) rotateY(0deg) rotateZ(135deg); -ms-transform: rotateX(125deg) rotateY(0deg) rotateZ(135deg); -o-transform: rotateX(125deg) rotateY(0deg) rotateZ(135deg); transform: rotateX(125deg) rotateY(0deg) rotateZ(135deg); } 62.5% { -webkit-transform: rotateX(125deg) rotateY(0deg) rotateZ(135deg); -moz-transform: rotateX(125deg) rotateY(0deg) rotateZ(135deg); -ms-transform: rotateX(125deg) rotateY(0deg) rotateZ(135deg); -o-transform: rotateX(125deg) rotateY(0deg) rotateZ(135deg); transform: rotateX(125deg) rotateY(0deg) rotateZ(135deg); } 75% { -webkit-transform: rotateX(125deg) rotateY(0deg) rotateZ(45deg); -moz-transform: rotateX(125deg) rotateY(0deg) rotateZ(45deg); -ms-transform: rotateX(125deg) rotateY(0deg) rotateZ(45deg); -o-transform: rotateX(125deg) rotateY(0deg) rotateZ(45deg); transform: rotateX(125deg) rotateY(0deg) rotateZ(45deg); } 87.5% { -webkit-transform: rotateX(125deg) rotateY(0deg) rotateZ(45deg); -moz-transform: rotateX(125deg) rotateY(0deg) rotateZ(45deg); -ms-transform: rotateX(125deg) rotateY(0deg) rotateZ(45deg); -o-transform: rotateX(125deg) rotateY(0deg) rotateZ(45deg); transform: rotateX(125deg) rotateY(0deg) rotateZ(45deg); } 100% { -webkit-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg); -moz-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg); -ms-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg); -o-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg); transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg); }
}

Home Page	Home
Developer	Michael Hobizal
Username	mikehobizal
Uploaded	January 05, 2023
Rating	4.5
Size	3,818 Kb
Views	8,096

Do you need developer help for Wireframe Cube?

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!

Michael Hobizal (mikehobizal) Script Codes

Name	Size
Chaos	12,607 Kb
Wave Lines	4,023 Kb
CSS Infinity Loader	3,500 Kb
CSS Letter Animation	5,812 Kb
Triangles Loader	2,603 Kb
Circular Circle Circling	5,471 Kb
Another Download Link	2,764 Kb
CSS Chart with clip-path	3,524 Kb
CSS Clock	8,296 Kb
Happy Holidays CSS	19,478 Kb

Create amazing captions 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!

Similar Scripts & Codes

Name	Username	Size
Jstam.com Home Page	Jstam	10,558 Kb
Custom checkbox example	Capelo	3,495 Kb
Content Changer	Cliffpyles	4,538 Kb
Draggable directive	YahyaKacem	2,277 Kb
Simple DevTools	Deegill	2,511 Kb
A Pen by lizz	Lizz	10,068 Kb
Sinclair Research Computers	MattCowley	3,068 Kb
Rainbow Drops	Csbarnes	2,365 Kb
Expert Help	SinceSidSlid	4,064 Kb
A simple log in form made with css	Mayurelbhar	2,160 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!