Cookie Consent by Free Privacy Policy Generator ๐Ÿ“Œ 3D Orbiting Split Images

๐Ÿ  Team IT Security News

TSecurity.de ist eine Online-Plattform, die sich auf die Bereitstellung von Informationen,alle 15 Minuten neuste Nachrichten, Bildungsressourcen und Dienstleistungen rund um das Thema IT-Sicherheit spezialisiert hat.
Ob es sich um aktuelle Nachrichten, Fachartikel, Blogbeitrรคge, Webinare, Tutorials, oder Tipps & Tricks handelt, TSecurity.de bietet seinen Nutzern einen umfassenden รœberblick รผber die wichtigsten Aspekte der IT-Sicherheit in einer sich stรคndig verรคndernden digitalen Welt.

16.12.2023 - TIP: Wer den Cookie Consent Banner akzeptiert, kann z.B. von Englisch nach Deutsch รผbersetzen, erst Englisch auswรคhlen dann wieder Deutsch!

Google Android Playstore Download Button fรผr Team IT Security



๐Ÿ“š 3D Orbiting Split Images


๐Ÿ’ก Newskategorie: Programmierung
๐Ÿ”— Quelle: dev.to

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>

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);
}

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();

๐Ÿ‘‰ Source & Preview: https://scriptcodes.co/3d-orbiting-split-images-bwgdob

...



๐Ÿ“Œ 3D Orbiting Split Images


๐Ÿ“ˆ 44 Punkte

๐Ÿ“Œ When You Split the Brain, Do You Split the Person?


๐Ÿ“ˆ 27.44 Punkte

๐Ÿ“Œ [$] Developers split over split-lock detection


๐Ÿ“ˆ 27.44 Punkte

๐Ÿ“Œ Fortinet stock split: Will second FTNT split drive up demand for cyber security shares?


๐Ÿ“ˆ 27.44 Punkte

๐Ÿ“Œ How to use Split View for split-screen on iPad


๐Ÿ“ˆ 27.44 Punkte

๐Ÿ“Œ Python Split String โ€“ How to Split a String into a List or Array in Python


๐Ÿ“ˆ 27.44 Punkte

๐Ÿ“Œ CVE-2024-0684 | GNU Coreutils split src/split.c heap-based overflow


๐Ÿ“ˆ 27.44 Punkte

๐Ÿ“Œ PDF Split and Merge 1.5 - Split,Merge & Edit PDF Anytime


๐Ÿ“ˆ 27.44 Punkte

๐Ÿ“Œ System76 Blog โ€” See what changes have been orbiting Pop!_OS! (Pop!_18.10)


๐Ÿ“ˆ 23.69 Punkte

๐Ÿ“Œ Wired, Brian Barrett, DEF CON 28 (planned) : Hackers to Hijack an Orbiting Satellite


๐Ÿ“ˆ 23.69 Punkte

๐Ÿ“Œ Orbiting planets in solar systems Python | nano


๐Ÿ“ˆ 23.69 Punkte

๐Ÿ“Œ Earth-Like Planet, With Ambitious Life Possibility, Found Orbiting the Star Next Door


๐Ÿ“ˆ 23.69 Punkte

๐Ÿ“Œ CSS Animation: A circle with smaller circles orbiting it.


๐Ÿ“ˆ 23.69 Punkte

๐Ÿ“Œ Earth-Like Planet, With Ambitious Life Possibility, Found Orbiting the Star Next Door


๐Ÿ“ˆ 23.69 Punkte

๐Ÿ“Œ Thrilling Discovery of Seven Earth-Sized Planets Orbiting Nearby Star


๐Ÿ“ˆ 23.69 Punkte

๐Ÿ“Œ Astronomers Find Star Orbiting a Black Hole At 1 Percent the Speed of Light


๐Ÿ“ˆ 23.69 Punkte

๐Ÿ“Œ Astronomers Detect Four Earth-Sized Planets Orbiting The Nearest Sun-Like Star


๐Ÿ“ˆ 23.69 Punkte

๐Ÿ“Œ Air Force Gives 10-Year-Old Orbiting Satellite To Ham Radio Operators


๐Ÿ“ˆ 23.69 Punkte

๐Ÿ“Œ Asteroid From Another Star System Found Orbiting Wrong Way Near Jupiter


๐Ÿ“ˆ 23.69 Punkte

๐Ÿ“Œ Astronomers Discover 12 New Moons Orbiting Jupiter - One on Collision Course With the Others


๐Ÿ“ˆ 23.69 Punkte

๐Ÿ“Œ Evidence is Mounting That a World the Size of Neptune Could be Orbiting a Giant Planet Far, Far Away


๐Ÿ“ˆ 23.69 Punkte

๐Ÿ“Œ About That Monstrous Black Hole We're All Orbiting


๐Ÿ“ˆ 23.69 Punkte

๐Ÿ“Œ ISS Marks 20 Years Orbiting Earth With Longest Timelapse Ever Made In Space


๐Ÿ“ˆ 23.69 Punkte

๐Ÿ“Œ NASA Announces First Commercial Partner For A Space Station Orbiting The Moon


๐Ÿ“ˆ 23.69 Punkte

๐Ÿ“Œ Two Potentially Life-Friendly Planets Found Orbiting a Nearby Star


๐Ÿ“ˆ 23.69 Punkte

๐Ÿ“Œ Star Orbiting Massive Black Hole Lends Support To Einstein's Theory


๐Ÿ“ˆ 23.69 Punkte

๐Ÿ“Œ Star Wars: Tatooine Was Likely Orbiting In the Same Plane As Its Twin Suns


๐Ÿ“ˆ 23.69 Punkte

๐Ÿ“Œ NASA Picks SpaceX To Fly Cargo To Moon-Orbiting Gateway Space Station


๐Ÿ“ˆ 23.69 Punkte

๐Ÿ“Œ Astronomers Have Found a New Planet Like Earth Orbiting a Star Like the Sun


๐Ÿ“ˆ 23.69 Punkte

๐Ÿ“Œ Watch NASA SLS's First Launch with a Moon-Orbiting Capsule Named 'Orion'


๐Ÿ“ˆ 23.69 Punkte

๐Ÿ“Œ Split-Second Phantom Images Fool Autopilots


๐Ÿ“ˆ 20.31 Punkte

๐Ÿ“Œ Split-Second 'Phantom' Images Can Fool Tesla's Autopilot


๐Ÿ“ˆ 20.31 Punkte

๐Ÿ“Œ Nevma Adaptive Images Plugin up to 0.6.66 on WordPress adaptive-images-script.php $REQUEST['adaptive-images-settings'] directory traversal


๐Ÿ“ˆ 19.76 Punkte

๐Ÿ“Œ [Notiz] Opera Mini 13 fรผr iOS: Split View, Passwort-Manager und Tab-Synchronisation


๐Ÿ“ˆ 13.72 Punkte

๐Ÿ“Œ Android N: Erste Developer Preview mit Split Screen ist fertig


๐Ÿ“ˆ 13.72 Punkte











matomo