{"id":25617623,"url":"https://github.com/immutal0/3d-css-scss-example","last_synced_at":"2026-04-18T10:32:50.009Z","repository":{"id":277262082,"uuid":"931361617","full_name":"Immutal0/3D-CSS-SCSS-Example","owner":"Immutal0","description":"CSS SCSS example for 3d effect","archived":false,"fork":false,"pushed_at":"2025-02-12T06:31:59.000Z","size":8416,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-13T02:26:22.296Z","etag":null,"topics":["3d","css","example","scss"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Immutal0.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-12T06:29:34.000Z","updated_at":"2025-02-12T06:55:31.000Z","dependencies_parsed_at":"2025-02-13T02:26:24.414Z","dependency_job_id":"a0cab41e-4b55-4b8a-93fa-9f3f6ca71122","html_url":"https://github.com/Immutal0/3D-CSS-SCSS-Example","commit_stats":null,"previous_names":["immutal0/3d-css-scss-example"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Immutal0%2F3D-CSS-SCSS-Example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Immutal0%2F3D-CSS-SCSS-Example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Immutal0%2F3D-CSS-SCSS-Example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Immutal0%2F3D-CSS-SCSS-Example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Immutal0","download_url":"https://codeload.github.com/Immutal0/3D-CSS-SCSS-Example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240129452,"owners_count":19752356,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d","css","example","scss"],"created_at":"2025-02-22T05:24:12.885Z","updated_at":"2026-04-18T10:32:49.973Z","avatar_url":"https://github.com/Immutal0.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSS \u0026 SCSS Animations\n\nThis repository showcases a collection of various CSS and SCSS animations, including 3D effects and sliders. All animations were inspired by CodePen projects and are designed to bring interactive and visually engaging experiences to web pages.\n\n---\n\n## Table of Contents\n\n- [3D Card](#3d-card)\n- [3D Carousel](#3d-carousel)\n- [3D Card Hover](#3d-card-hover)\n- [3D Card Effect](#3d-card-effect)\n- [3D Image Hover](#3d-image-hover)\n- [3D Thumb Image Effect](#3d-thumb-image-effect)\n\n---\n\n## 3D Card\n\nThis project implements a 3D card animation using pure CSS. When hovered, the card rotates and displays a shadow effect for a more realistic 3D look.\n\n### CSS:\n```css\n.card:hover .wrapper {\n  transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);\n  box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);\n}\n```\n\n---\n\n## 3D Carousel\n\nA 3D image carousel that utilizes CSS and JavaScript to create a rotating effect for images.\n\n### Start Effect:\n```js\nfor (var i = 0; i \u003c imgs.length; i++) {\n    imgs[i].style.transform = \"rotateY(\" + i * (360 / imgs.length) + \"deg) translateZ(\" + radius + \"px)\";\n    imgs[i].style.transition = \"transform 1s\";\n    imgs[i].style.transitionDelay = delayTime || (imgs.length - i) / 4 + \"s\";\n}\n```\n\n### Image 3D Effect:\n```css\nimg {\n  transform-style: preserve-3d;\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  box-shadow: 0 0 8px #fff;\n  -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005);\n}\n```\n\n### Mouse Event Effect:\n```js\ndocument.onpointerdown = function (e) {\n  clearInterval(wheel.timer);\n  e = e || window.event;\n  var sX = e.clientX, sY = e.clientY;\n\n  this.onpointermove = function (e) {\n    var nX = e.clientX, nY = e.clientY;\n    desX = nX - sX;\n    desY = nY - sY;\n    tX += desX * 0.1;\n    tY += desY * 0.1;\n    applyTransform(wheel);\n    sX = nX;\n    sY = nY;\n  };\n\n  this.onpointerup = function (e) {\n    wheel.timer = setInterval(function () {\n      desX *= 0.95;\n      desY *= 0.95;\n      tX += desX * 0.1;\n      tY += desY * 0.1;\n      applyTransform(wheel);\n      if (Math.abs(desX) \u003c 0.5 \u0026\u0026 Math.abs(desY) \u003c 0.5) clearInterval(wheel.timer);\n    }, 17);\n    this.onpointermove = this.onpointerup = null;\n  };\n};\n```\n\n---\n\n## 3D Card Hover\n\nThis project demonstrates a 3D hover effect using a character-based animation.\n\n### Caption Animation:\n```css\nfigcaption {\n  transform: perspective(500px) translateY(100%) rotateX(-90deg);\n  transition: 0.5s;\n}\n```\n\n### Image Effect:\n```css\nfigure {\n  width: 100%;\n  cursor: pointer;\n  filter: drop-shadow(0 0 20px rgb(0 0 0/50%));\n}\n\nfigure:before {\n  background-image: url(https://example.com/image.jpg);\n}\n```\n\n---\n\n## 3D Card Effect\n\nThis project shows how to create a 3D card effect that reacts to mouse movements.\n\n### Mouse Event Listener:\n```js\ncontainer.addEventListener(\"mousemove\", (e) =\u003e {\n  let X = (window.innerWidth / 2 - e.pageX) / 30;\n  let Y = (window.innerHeight / 2 - e.pageY) / 30;\n  card.style.transition = \"none\";\n  card.style.transform = `rotateX(${X}deg) rotateY(${Y}deg)`;\n});\n```\n\n---\n\n## 3D Image Hover\n\nA slider effect that shifts multiple images along with a 3D hover effect.\n\n### Animation:\n```css\n.container:hover img:nth-child(4) {\n  transform: translate(160px, -160px);\n  opacity: 1;\n}\n\n.container:hover img:nth-child(3) {\n  transform: translate(120px, -120px);\n  opacity: 0.8;\n}\n```\n\n---\n\n## 3D Thumb Image Effect\n\nThis project demonstrates a 3D effect applied to thumbnail images, including both book and shadow effects.\n\n### Book Effect:\n```css\n.thumb a:after {\n  transform: rotateX(90deg);\n}\n```\n\n### Shadow Effect:\n```css\n.thumb a:before {\n  opacity: 0.15;\n  box-shadow: 0 0 100px rgba(0, 0, 0, 0.5);\n}\n\n.thumb:hover a:before {\n  opacity: 1;\n  box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimmutal0%2F3d-css-scss-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimmutal0%2F3d-css-scss-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimmutal0%2F3d-css-scss-example/lists"}