Spinning Cube Logo Concept

Developer
Tim Normington
Size
4,032 Kb
Views
10,120
  1. Spinning Cube Logo Concept Previews
  2. Spinning Cube Logo Concept HTML Codes
  3. Spinning Cube Logo Concept CSS Codes
  4. Spinning Cube Logo Concept JS Codes

How do I make an spinning cube logo concept?

I came up with this idea while trying to figure out how to aesthetically display four slightly different company logos on a website.. What is a spinning cube logo concept? How do you make a spinning cube logo concept? This script and codes were developed by Tim Normington on 05 December 2022, Monday.

Spinning Cube Logo Concept Previews
IQ Test

Spinning Cube Logo Concept - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Spinning Cube Logo Concept</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class="nav"> <div class="wrap"> <div class="cube"> <div class="front">front</div> <div class="back">back</div> <div class="top">top</div> <div class="bottom">bottom</div> <div class="left">left</div> <div class="right">right</div> </div> </div> <div class="logo-overlay"> <ul class="logos"> <li class="home-link"><i class="fa fa-home"></i> Home</li> <li><img src="http://www.usb.org/home/BasicUSB.png"></li> <li><img src="http://www.usb.org/home/SSUSB.png"></li> <li><img src="http://www.usb.org/home/Hi-SpeedUSB.png"></li> <li><img src="http://www.usb.org/home/SSUSB_10_logoc.jpg"></li> </ul> </div> <ul class="main-nav"> <li><a href="#">About USB-IF</a></li> <li><a href="#">Channel</a></li> <li><a href="#">Press</a></li> <li><a href="#">Developers</a></li> <li><a href="#">Members</a></li> <li><a href="#">Products</a></li> </ul>
</nav> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Spinning Cube Logo Concept - Script Codes CSS Codes

body { height: 100vh;
}
a { color: #005295;
}
.wrap { perspective: 2000px; perspective-origin: 50% 500px; display: flex; max-width: 250px; align-items: center; justify-content: center;
}
.nav { width: 100%; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); min-height: 150px; overflow: hidden;
}
.main-nav { margin-top: 65px; margin-left: 250px; list-style-type: none;
}
.main-nav li { display: inline-block; margin-right: 1em;
}
.main-nav li a { text-decoration: none;
}
.logo-overlay { top: 1em; left: 1em; z-index: 10; position: absolute; background-color: white; border: 1px solid blue; padding: 1em; border-radius: 4px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.35); transform: translateX(calc(-100% - 2em)); transition: all 0.35s ease-out;
}
.logo-overlay.active { transform: translateX(0);
}
.logo-overlay .logos { list-style-type: none; padding: 0; margin: 0;
}
.logo-overlay .logos .home-link { color: #005295; font-size: 2em; padding: 0.5em 0;
}
.logo-overlay .logos .home-link i { margin-right: 1em;
}
.logo-overlay .logos li { margin: 0; padding: 0;
}
.cube { position: relative; width: 200px; transform-style: preserve-3d; animation: spin 10s infinite linear; animation-delay: 1s; animation-timing-function: cubic-bezier(0.675, -0.38, 0.27, 1.355);
}
.cube div { position: absolute; width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; background-size: contain; background-repeat: no-repeat; background-position: center center; background-color: white; color: transparent;
}
.back { transform: translateZ(-100px) rotateY(180deg); background-image: url("http://www.usb.org/home/BasicUSB.png");
}
.right { transform: rotateY(-270deg) translateX(100px); transform-origin: top right; background-image: url("http://www.usb.org/home/SSUSB.png");
}
.left { transform: rotateY(270deg) translateX(-100px); transform-origin: center left; background-image: url("http://www.usb.org/home/Hi-SpeedUSB.png");
}
.top { transform: rotateX(-90deg) translateY(-100px); transform-origin: top center;
}
.bottom { transform: rotateX(90deg) translateY(100px); transform-origin: bottom center;
}
.front { transform: translateZ(100px); background-image: url("http://www.usb.org/home/SSUSB_10_logoc.jpg");
}
@keyframes spin { 0% { transform: rotateY(0); } 10% { transform: rotateY(-90deg); } 25% { transform: rotateY(-90deg); } 35% { transform: rotateY(-180deg); } 50% { transform: rotateY(-180deg); } 60% { transform: rotateY(-270deg); } 75% { transform: rotateY(-270deg); } 85% { transform: rotateY(-360deg); } 100% { transform: rotateY(-360deg); }
}

Spinning Cube Logo Concept - Script Codes JS Codes

$(document).ready(function() { var $logo_overlay = $('.logo-overlay'); var $logo_cube = $('.cube'); $logo_cube.click(function(e) { $logo_overlay.addClass('active'); e.stopPropagation(); $('body').click(function() { $logo_overlay.removeClass('active'); }); });
});
Spinning Cube Logo Concept - Script Codes
Spinning Cube Logo Concept - Script Codes
Home Page Home
Developer Tim Normington
Username tnormington
Uploaded December 05, 2022
Rating 3
Size 4,032 Kb
Views 10,120
Do you need developer help for Spinning Cube Logo Concept?

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!

Tim Normington (tnormington) Script Codes
Name
Loading Animation
Tri-column slanted hero with hover effect
Online Banking Interface
Expanding Circle Menu
Mobile Drop Down
Social Media Sidebar
Parellelogram Link Hover Effect
Mobile Dropdown Top Nav
Footer Link Navigation
SVG Coffee Animation
Create amazing love letters 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!