DEV Community

Cover image for 3D Orbiting Split Images
Free Webmasters
Free Webmasters

Posted on

3D Orbiting Split Images

#webdev #css #javascript #html

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

Top comments (1)

Collapse
 
ironcladdev profile image
Conner Ow •

Very cool concept! I find it quite difficult to read the massive block of code in this article without any context on what it does. Would love to see some screenshots/GIFs in your posts.

Nice job, looking forward to more!

Read next

alecbsherman profile image

Wizard's Toolkit Demo

Alec -

coderhxl profile image

AI+Node.js x-crawl crawler: Why are traditional crawlers no longer the first choice for data crawling?

CoderHXL -

gnwabumere profile image

Mastering CSS Custom Properties: Best Practices for Efficient Styling

nwabumere Godswill -

nikhil6076 profile image

Angular at Scale: Introduction to Micro Frontend Architecture

Nikhil Sai -