TheLazy.Dev
Portfolio GitHub

Blog

webdev |css |javascript |html

3D Orbiting Split Images

w7freedownload

Free Webmasters

Posted on February 10, 2023

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?

3D Orbiting Split Images - HTML Code:

<!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>
Enter fullscreen mode Exit fullscreen mode

3D Orbiting Split Images - CSS Code:

@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);
}
Enter fullscreen mode Exit fullscreen mode

3D Orbiting Split Images - JS Code:

// 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();
Enter fullscreen mode Exit fullscreen mode

👉 Source & Preview: https://scriptcodes.co/3d-orbiting-split-images-bwgdob

💖 💪 🙅 🚩
w7freedownload
Free Webmasters

Posted on February 10, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Demystifying Disappearing Dropdowns: A Chrome Developer's Guide to Inspecting Volatile UI Elements
webdev Demystifying Disappearing Dropdowns: A Chrome Developer's Guide to Inspecting Volatile UI Elements

November 12, 2024

Create fancy card with animated gradient border
webdev Create fancy card with animated gradient border

October 21, 2024

The good, bad and ugly of the "HTML first" manifest
webdev The good, bad and ugly of the "HTML first" manifest

November 17, 2023

3D Orbiting Split Images
webdev 3D Orbiting Split Images

February 10, 2023

Reflection! Cool Effects with -webkit-box-reflect
webdev Reflection! Cool Effects with -webkit-box-reflect

August 7, 2022