CodePen Embed - Futuristic 3D Hover Effect 🛸

Live

Live

Live

This Pen is owned by Jouan Marcel on CodePen.

See more by @jouanmarcel on CodePen

External CSS

https://fonts.googleapis.com/css?family=Raleway:200

External JavaScript

This Pen doesn't use any external JavaScript resources.

{"__browser":{"device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; web-share; vr","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__graphql":{"data":{"data":null,"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}]},"url":"https://codepen.io/graphql","api":"cprails","cpedata":{"action":"show","controller":"embed"}},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"NLgVjm\",\"auto_save\":true},\"hashid\":\"NLgVjm\",\"itemType\":\"pen\",\"resources\":[{\"url\":\"https://fonts.googleapis.com/css?family=Raleway:200\",\"order\":0,\"resource_type\":\"css\",\"par_content\":\"\"}],\"tags\":[\"3d\",\"hover\",\"futuristic\",\"transform\",\"effect\"],\"id\":27776459,\"user_id\":2138708,\"html\":\"<div class=\\\"all\\\">\\n<div class=\\\"lefter\\\">\\n  <div class=\\\"text\\\">Hosting</div>\\n</div>\\n<div class=\\\"left\\\">\\n  <div class=\\\"text\\\">Web Design</div>\\n</div>\\n<div class=\\\"center\\\">\\n  <div class=\\\"explainer\\\"><span>Hover me</span></div>\\n  <div class=\\\"text\\\">Frontend Development</div>\\n  </div>\\n<div class=\\\"right\\\">\\n  <div class=\\\"text\\\">Backend Development</div>\\n</div>\\n<div class=\\\"righter\\\">\\n  <div class=\\\"text\\\">SEO</div>\\n</div>\\n</div>\\n\\n<a href=\\\"https://jouanmarcel.com\\\" target=\\\"_blank\\\" class=\\\"ref\\\">🔗 Jouan Marcel</a>\",\"css\":\"body {\\n  font-family: 'Raleway', sans-serif;\\n  background-image: radial-gradient(circle at center, #899Dc4, #495D84);\\n  background-size: cover;\\n  background-repeat: no-repeat;\\n  height: 100vh;\\n  overflow: hidden;\\n  display: flex;\\n  justify-content: center;\\n  align-items: center;\\n  background: radial-gradient(ellipse at bottom, #1b2735, #090a0f);\\n  font-weight: 300;\\n}\\n.all {\\n  display: flex;\\n  perspective: 10px;\\n  transform: perspective(300px) rotateX(20deg);\\n  will-change: perspective;\\n  perspective-origin: center center;\\n  transition: all 1.3s ease-out;\\n  justify-content: center;\\n  transform-style: preserve-3d;\\n}\\n.all:hover {\\n  perspective: 1000px;\\n  transition: all 1.3s ease-in;\\n  transform: perspective(10000px) rotateX(0deg);\\n  .text {\\n    opacity: 1;\\n  }\\n  & > div {\\n    opacity: 1;\\n    transition-delay: 0s;\\n  }\\n  .explainer {\\n    opacity: 0;\\n  }\\n}\\n\\n.left, .center, .right, .lefter, .righter {\\n  width: 200px;\\n  height: 150px;\\n  transform-style: preserve-3d;\\n  border-radius: 10px;\\n  border: 1px solid #fff;\\n  box-shadow: 0 0 20px 5px rgba(100, 100, 255, .4);\\n  opacity: 0;\\n  transition: all .3s ease;\\n  transition-delay: 1s;\\n  position: relative;\\n  background-position: center center;\\n  background-size: contain;\\n  background-repeat: no-repeat;\\n  background-color: #58d;\\n  cursor: pointer;\\n  background-blend-mode: color-burn;\\n  \\n  &:hover {\\n    box-shadow: 0 0 30px 10px rgba(100, 100, 255, .6);\\n  background-color: #ccf;\\n  }\\n}\\n.text {\\n  transform: translateY(30px);\\n  opacity: 0;\\n  transition: all .3s ease;\\n  bottom: 0;\\n  left: 5px;\\n  position: absolute;\\n  will-change: transform;\\n  color: #fff;\\n  text-shadow: 0 0 5px rgba(100, 100, 255, .6)\\n}\\n.lefter {\\n  transform: translateX(-60px) translateZ(-50px) rotateY(-10deg);\\n  background-image: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/organization-512.png);\\n}\\n.left {\\n  transform: translateX(-30px) translateZ(-25px) rotateY(-5deg);\\n  background-image: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/creative_draw-512.png);\\n}\\n.center {\\n  opacity: 1;\\n  background-image: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/app_window-512.png);\\n}\\n.right {\\n  transform: translateX(30px) translateZ(-25px) rotateY(5deg);\\n  background-image: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/cloud_weather-512.png);\\n}\\n.righter {\\n  transform: translateX(60px) translateZ(-50px) rotateY(10deg);\\n  background-image: url(https://cdn3.iconfinder.com/data/icons/other-icons/48/search-512.png);\\n}\\n.explainer {\\n  font-weight: 300;\\n  font-size: 2rem;\\n  color: #fff;\\n  transition: all .6s ease;\\n  width: 100%;\\n  height: 100%;\\n  background-color: #303050;\\n  background-image: radial-gradient(circle at center top, #cce, #33a);\\n  border-radius: 10px;\\n  text-shadow: 0 0 10px rgba(255, 255, 255, .8);\\n  \\n  display: flex;\\n  justify-content: center;\\n  align-items: center;\\n}\\n\\n\\n.ref {\\n  background-color: #000;\\n  background-image: linear-gradient(to bottom, #d80, #c00);\\n  border-radius: 3px;\\n  padding: 7px 10px;\\n  position: absolute;\\n  font-size: 16px;\\n  bottom: 10px;\\n  right: 10px;\\n  color: #fff;\\n  text-decoration: none;\\n  text-shadow: 0 0 3px rgba(0, 0, 0, .4);\\n  &::first-letter {\\n    font-size: 12px;\\n  }\\n}\",\"js\":\"// Created by Jouan Marcel\\n// https://jouanmarcel.com\\n\\n\\n// Iconset by Luboš Volkov\\n// iconfinder.com/iconsets/other-icons\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2018-09-05T07:01:45.000Z\",\"updated_at\":\"2018-09-05T07:19:42.000Z\",\"title\":\"Futuristic 3D Hover Effect 🛸\",\"description\":\"# 🛸\\n## Usable as navigation, menu or effect\\nIt uses CSS transform and perspective to create a unique hololens-like animation effect.\\n\\nCan be used for many more use cases, you will probably have your own ideas.\\n\\nThis is an experimental idea, you may want to flesh it out for use in production.\",\"slug_hash\":\"NLgVjm\",\"head\":\"\",\"private\":false,\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"autoprefixer\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":\"2022-11-08T22:42:55.128Z\",\"pen_hash\":null}","__jwt":"eyJhbGciOiJIUzI1NiJ9.eyJjbGFpbXMiOnsidXNlcl9pZCI6MX0sImV4cCI6MTY3NTUxMDI4M30.Ac7RmtpN-U3luWnVUFnsyhsl75OTi8OoJmnZIwtF29o","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6bce046e7128ddf9391ccf7acbecbf7ce0cbd7b6defbeb2e217a867f51485d25.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-550eae0ce567d3d9182e33cee4e187761056020161aa87e3ef74dc467972c555.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"}