3D Orbiting Split Images

Developer
Kyle Brumm
Size
5,806 Kb
Views
6,072
  1. 3D Orbiting Split Images Previews
  2. 3D Orbiting Split Images HTML Codes
  3. 3D Orbiting Split Images CSS Codes
  4. 3D Orbiting Split Images JS Codes

How do I make an 3d orbiting split images?

Just messing around with 3D transforms and splitting images into pieces.. What is a 3d orbiting split images? How do you make a 3d orbiting split images? This script and codes were developed by Kyle Brumm on 07 January 2023, Saturday.

3D Orbiting Split Images Previews
IQ Test

3D Orbiting Split Images - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3D Orbiting Split Images</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header class="header container"> <h1 class="pen__heading">3D Orbiting<br>Split Images</h1> <h4 class="pen__subheading">By: <a href="http://kylebrumm.com" target="_blank">Kyle Brumm</a></h4>
</header>
<main class="main container"> <div class="col col--full"> <div class="block--split-image block--split-image-1"> <div class="block__content"> <h2> Chillwave Lo-Fi Coffee<br> <small>(hover me)</small> </h2> </div> <div class="block__image" data-orbit> <div class="part part-1"></div> <div class="part part-2"></div> <div class="part part-3"></div> <div class="part part-4"></div> </div> </div> </div> <div class="col col--full"> <div class="block--split-image block--split-image-2"> <div class="block__content"> <h2> Retro Fingerstache<br> <small>(hover me)</small> </h2> </div> <div class="block__image" data-orbit> <div class="part part-1"></div> <div class="part part-2"></div> <div class="part part-3"></div> <div class="part part-4"></div> </div> </div> </div> <div class="col col--full"> <div class="block--split-image block--split-image-3"> <div class="block__content"> <h2> Gluten-Free Mixtape<br> <small>(hover me)</small> </h2> </div> <div class="block__image" data-orbit> <div class="part part-1"></div> <div class="part part-2"></div> <div class="part part-3"></div> <div class="part part-4"></div> </div> </div> </div> <div class="col col--full"> <div class="block--split-image block--split-image-4"> <div class="block__content"> <h2> Typewriter Mumblecore<br> <small>(hover me)</small> </h2> </div> <div class="block__image" data-orbit> <div class="part part-1"></div> <div class="part part-2"></div> <div class="part part-3"></div> <div class="part part-4"></div> </div> </div> </div>
</main> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

3D Orbiting Split Images - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400|Raleway:300);
*,
*:before,
*:after { box-sizing: border-box;
}
html { font-family: "Open Sans", Helvetica, arial, sans-serif; color: #333333; background-color: #eeeeee;
}
h1, h2, h3,
h4, h5, h6 { font-family: "Raleway", "Open Sans", sans-serif; text-align: center;
}
a { color: #333333; text-decoration: none;
}
img { max-width: 100%;
}
.header { position: relative; overflow: visible;
}
.header:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 50px; height: 2px; background-color: #8474c6; -webkit-transform: translateX(-50%); transform: translateX(-50%);
}
.pen__subheading { margin-bottom: 0;
}
.pen__subheading a { color: #8474c6;
}
.pen__subheading a:hover, .pen__subheading a:focus { color: #b4aadc;
}
.container { width: 100%; max-width: 800px; margin: 0 auto; padding: 2rem 1rem;
}
.col { padding: 1rem;
}
@media (min-width: 800px) { .col { width: 50%; float: left; } .col:nth-of-type(2n+1) { clear: left; }
}
.col.col--full { width: 100%;
}
.main { overflow: hidden;
}
.block--split-image { position: relative; max-width: 400px; text-align: center; -webkit-perspective: 50px; perspective: 50px;
}
.block--split-image .block__content { position: relative; display: inline-block; z-index: 1; padding: 3rem 1.5rem; -webkit-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out;
}
.block--split-image .block__content h2 { margin: 0;
}
.block--split-image .block__content:hover { opacity: 0; -webkit-transform: translateY(-15px); transform: translateY(-15px);
}
.block--split-image .block__content:hover + .block__image { -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transform: rotate3d(0, 0, 0, 0deg) !important; transform: rotate3d(0, 0, 0, 0deg) !important;
}
.block--split-image .block__content:hover + .block__image .part-1 { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.block--split-image .block__content:hover + .block__image .part-2 { -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%);
}
.block--split-image .block__content:hover + .block__image .part-3 { -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%);
}
.block--split-image .block__content:hover + .block__image .part-4 { -webkit-transform: translate(50%, 50%); transform: translate(50%, 50%);
}
.block--split-image .block__image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; -webkit-perspective: 50px; perspective: 50px; -webkit-transition: 5s ease-in-out; transition: 5s ease-in-out;
}
.block--split-image .block__image .part { position: absolute; top: 50%; left: 50%; background-repeat: no-repeat; -webkit-transition: 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.block--split-image .block__image .part-1 { background-position: top left;
}
.block--split-image .block__image .part-2 { background-position: top right;
}
.block--split-image .block__image .part-3 { background-position: bottom left;
}
.block--split-image .block__image .part-4 { background-position: bottom right;
}
.block--split-image-1 { margin: 165px auto;
}
.block--split-image-1 .block__content { background-color: rgba(168, 156, 161, 0.9);
}
.block--split-image-1 .block__content:hover + .block__image .part { -webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
.block--split-image-1 .block__content:hover + .block__image .part-1 { -webkit-transition-delay: 0.15s !important; transition-delay: 0.15s !important;
}
.block--split-image-1 .block__content:hover + .block__image .part-2 { -webkit-transition-delay: 0.15s !important; transition-delay: 0.15s !important;
}
.block--split-image-1 .block__content:hover + .block__image .part-3 { -webkit-transition-delay: 0.25s !important; transition-delay: 0.25s !important;
}
.block--split-image-1 .block__content:hover + .block__image .part-4 { -webkit-transition-delay: 0.15s !important; transition-delay: 0.15s !important;
}
.block--split-image-1 .block__image .part { margin-left: -125px; margin-top: -75px; width: 250px; height: 150px; background-image: url(https://unsplash.it/500/300?image=1052);
}
.block--split-image-1 .block__image .part-1 { -webkit-transform: translate(-57%, -68%) rotate3d(1, -1, -1, 3deg); transform: translate(-57%, -68%) rotate3d(1, -1, -1, 3deg);
}
.block--split-image-1 .block__image .part-2 { -webkit-transform: translate(76%, -64%) rotate3d(1, 1, -1, 3deg); transform: translate(76%, -64%) rotate3d(1, 1, -1, 3deg);
}
.block--split-image-1 .block__image .part-3 { -webkit-transform: translate(-80%, 65%) rotate3d(-1, -1, -1, 3deg); transform: translate(-80%, 65%) rotate3d(-1, -1, -1, 3deg);
}
.block--split-image-1 .block__image .part-4 { -webkit-transform: translate(72%, 68%) rotate3d(-1, 1, -1, 3deg); transform: translate(72%, 68%) rotate3d(-1, 1, -1, 3deg);
}
.block--split-image-2 { margin: 165px auto;
}
.block--split-image-2 .block__content { background-color: rgba(166, 130, 190, 0.9);
}
.block--split-image-2 .block__content:hover + .block__image .part { -webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
.block--split-image-2 .block__content:hover + .block__image .part-1 { -webkit-transition-delay: 0.2s !important; transition-delay: 0.2s !important;
}
.block--split-image-2 .block__content:hover + .block__image .part-2 { -webkit-transition-delay: 0.1s !important; transition-delay: 0.1s !important;
}
.block--split-image-2 .block__content:hover + .block__image .part-3 { -webkit-transition-delay: 0.15s !important; transition-delay: 0.15s !important;
}
.block--split-image-2 .block__content:hover + .block__image .part-4 { -webkit-transition-delay: 0.2s !important; transition-delay: 0.2s !important;
}
.block--split-image-2 .block__image .part { margin-left: -125px; margin-top: -75px; width: 250px; height: 150px; background-image: url(https://unsplash.it/500/300?image=1044);
}
.block--split-image-2 .block__image .part-1 { -webkit-transform: translate(-75%, -71%) rotate3d(1, -1, -1, 3deg); transform: translate(-75%, -71%) rotate3d(1, -1, -1, 3deg);
}
.block--split-image-2 .block__image .part-2 { -webkit-transform: translate(58%, -78%) rotate3d(1, 1, -1, 3deg); transform: translate(58%, -78%) rotate3d(1, 1, -1, 3deg);
}
.block--split-image-2 .block__image .part-3 { -webkit-transform: translate(-69%, 64%) rotate3d(-1, -1, -1, 3deg); transform: translate(-69%, 64%) rotate3d(-1, -1, -1, 3deg);
}
.block--split-image-2 .block__image .part-4 { -webkit-transform: translate(77%, 69%) rotate3d(-1, 1, -1, 3deg); transform: translate(77%, 69%) rotate3d(-1, 1, -1, 3deg);
}
.block--split-image-3 { margin: 165px auto;
}
.block--split-image-3 .block__content { background-color: rgba(197, 101, 175, 0.9);
}
.block--split-image-3 .block__content:hover + .block__image .part { -webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
.block--split-image-3 .block__content:hover + .block__image .part-1 { -webkit-transition-delay: 0.15s !important; transition-delay: 0.15s !important;
}
.block--split-image-3 .block__content:hover + .block__image .part-2 { -webkit-transition-delay: 0.2s !important; transition-delay: 0.2s !important;
}
.block--split-image-3 .block__content:hover + .block__image .part-3 { -webkit-transition-delay: 0.2s !important; transition-delay: 0.2s !important;
}
.block--split-image-3 .block__content:hover + .block__image .part-4 { -webkit-transition-delay: 0.15s !important; transition-delay: 0.15s !important;
}
.block--split-image-3 .block__image .part { margin-left: -125px; margin-top: -75px; width: 250px; height: 150px; background-image: url(https://unsplash.it/500/300?image=961);
}
.block--split-image-3 .block__image .part-1 { -webkit-transform: translate(-73%, -65%) rotate3d(1, -1, -1, 3deg); transform: translate(-73%, -65%) rotate3d(1, -1, -1, 3deg);
}
.block--split-image-3 .block__image .part-2 { -webkit-transform: translate(79%, -64%) rotate3d(1, 1, -1, 3deg); transform: translate(79%, -64%) rotate3d(1, 1, -1, 3deg);
}
.block--split-image-3 .block__image .part-3 { -webkit-transform: translate(-68%, 72%) rotate3d(-1, -1, -1, 3deg); transform: translate(-68%, 72%) rotate3d(-1, -1, -1, 3deg);
}
.block--split-image-3 .block__image .part-4 { -webkit-transform: translate(69%, 71%) rotate3d(-1, 1, -1, 3deg); transform: translate(69%, 71%) rotate3d(-1, 1, -1, 3deg);
}
.block--split-image-4 { margin: 165px auto;
}
.block--split-image-4 .block__content { background-color: rgba(135, 118, 102, 0.9);
}
.block--split-image-4 .block__content:hover + .block__image .part { -webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
.block--split-image-4 .block__content:hover + .block__image .part-1 { -webkit-transition-delay: 0.25s !important; transition-delay: 0.25s !important;
}
.block--split-image-4 .block__content:hover + .block__image .part-2 { -webkit-transition-delay: 0.2s !important; transition-delay: 0.2s !important;
}
.block--split-image-4 .block__content:hover + .block__image .part-3 { -webkit-transition-delay: 0.1s !important; transition-delay: 0.1s !important;
}
.block--split-image-4 .block__content:hover + .block__image .part-4 { -webkit-transition-delay: 0.1s !important; transition-delay: 0.1s !important;
}
.block--split-image-4 .block__image .part { margin-left: -125px; margin-top: -75px; width: 250px; height: 150px; background-image: url(https://unsplash.it/500/300?image=393);
}
.block--split-image-4 .block__image .part-1 { -webkit-transform: translate(-78%, -67%) rotate3d(1, -1, -1, 3deg); transform: translate(-78%, -67%) rotate3d(1, -1, -1, 3deg);
}
.block--split-image-4 .block__image .part-2 { -webkit-transform: translate(80%, -76%) rotate3d(1, 1, -1, 3deg); transform: translate(80%, -76%) rotate3d(1, 1, -1, 3deg);
}
.block--split-image-4 .block__image .part-3 { -webkit-transform: translate(-67%, 70%) rotate3d(-1, -1, -1, 3deg); transform: translate(-67%, 70%) rotate3d(-1, -1, -1, 3deg);
}
.block--split-image-4 .block__image .part-4 { -webkit-transform: translate(62%, 76%) rotate3d(-1, 1, -1, 3deg); transform: translate(62%, 76%) rotate3d(-1, 1, -1, 3deg);
}

3D Orbiting Split Images - Script Codes JS Codes

// Let's get our orbit on, man...
var orbit = { // Initialize the orbiting init: function(selector) { this.elements = document.querySelectorAll(selector || '[data-orbit]'); // Set the update interval this.setupIntervals(); }, // Setup the intervals for rotating setupIntervals: function() { var self = this; this.elements.forEach(function(el) { self.update(el); this.interval = setInterval(function() { self.update(el); }, 5000); }); }, // Update the orbit rotate3d update: function(el) { var min = -1; var max = 1; // Get our rotate values var rotate = [ (Math.floor(Math.random() * (max - min + 1)) + min)+'.'+(Math.floor(Math.random() * 9) + 1), (Math.floor(Math.random() * (max - min + 1)) + min)+'.'+(Math.floor(Math.random() * 9) + 1) ]; // Set the transform el.style.webkitTransform = 'rotate3d('+rotate[0]+', '+rotate[1]+', 0, 1deg)'; el.style.MozTransform = 'rotate3d('+rotate[0]+', '+rotate[1]+', 0, 1deg)'; el.style.msTransform = 'rotate3d('+rotate[0]+', '+rotate[1]+', 0, 1deg)'; el.style.OTransform = 'rotate3d('+rotate[0]+', '+rotate[1]+', 0, 1deg)'; el.style.transform = 'rotate3d('+rotate[0]+', '+rotate[1]+', 0, 1deg)'; }
}
// Start it up
orbit.init();
3D Orbiting Split Images - Script Codes
3D Orbiting Split Images - Script Codes
Home Page Home
Developer Kyle Brumm
Username kjbrum
Uploaded January 07, 2023
Rating 4.5
Size 5,806 Kb
Views 6,072
Do you need developer help for 3D Orbiting Split Images?

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!

Kyle Brumm (kjbrum) Script Codes
Name
Wavy Loading Animations
Button Hover Effects
SVG Hover Animations
Simple Accordion Concept
Simple Tabs Concept
CSS Only Dropdown
CSS3 Stylish Checkboxes
3D Parallax Boxes
Subtle Menu Animation
Stacked Cards Hover Effects
Create amazing video scripts 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!