https://github.com/immutal0/3d-css-scss-example
CSS SCSS example for 3d effect
https://github.com/immutal0/3d-css-scss-example
3d css example scss
Last synced: 11 months ago
JSON representation
CSS SCSS example for 3d effect
- Host: GitHub
- URL: https://github.com/immutal0/3d-css-scss-example
- Owner: Immutal0
- License: apache-2.0
- Created: 2025-02-12T06:29:34.000Z (12 months ago)
- Default Branch: master
- Last Pushed: 2025-02-12T06:31:59.000Z (12 months ago)
- Last Synced: 2025-02-13T02:26:22.296Z (12 months ago)
- Topics: 3d, css, example, scss
- Language: CSS
- Homepage:
- Size: 8.03 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CSS & SCSS Animations
This 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.
---
## Table of Contents
- [3D Card](#3d-card)
- [3D Carousel](#3d-carousel)
- [3D Card Hover](#3d-card-hover)
- [3D Card Effect](#3d-card-effect)
- [3D Image Hover](#3d-image-hover)
- [3D Thumb Image Effect](#3d-thumb-image-effect)
---
## 3D Card
This 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.
### CSS:
```css
.card:hover .wrapper {
transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
}
```
---
## 3D Carousel
A 3D image carousel that utilizes CSS and JavaScript to create a rotating effect for images.
### Start Effect:
```js
for (var i = 0; i < imgs.length; i++) {
imgs[i].style.transform = "rotateY(" + i * (360 / imgs.length) + "deg) translateZ(" + radius + "px)";
imgs[i].style.transition = "transform 1s";
imgs[i].style.transitionDelay = delayTime || (imgs.length - i) / 4 + "s";
}
```
### Image 3D Effect:
```css
img {
transform-style: preserve-3d;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 8px #fff;
-webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005);
}
```
### Mouse Event Effect:
```js
document.onpointerdown = function (e) {
clearInterval(wheel.timer);
e = e || window.event;
var sX = e.clientX, sY = e.clientY;
this.onpointermove = function (e) {
var nX = e.clientX, nY = e.clientY;
desX = nX - sX;
desY = nY - sY;
tX += desX * 0.1;
tY += desY * 0.1;
applyTransform(wheel);
sX = nX;
sY = nY;
};
this.onpointerup = function (e) {
wheel.timer = setInterval(function () {
desX *= 0.95;
desY *= 0.95;
tX += desX * 0.1;
tY += desY * 0.1;
applyTransform(wheel);
if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) clearInterval(wheel.timer);
}, 17);
this.onpointermove = this.onpointerup = null;
};
};
```
---
## 3D Card Hover
This project demonstrates a 3D hover effect using a character-based animation.
### Caption Animation:
```css
figcaption {
transform: perspective(500px) translateY(100%) rotateX(-90deg);
transition: 0.5s;
}
```
### Image Effect:
```css
figure {
width: 100%;
cursor: pointer;
filter: drop-shadow(0 0 20px rgb(0 0 0/50%));
}
figure:before {
background-image: url(https://example.com/image.jpg);
}
```
---
## 3D Card Effect
This project shows how to create a 3D card effect that reacts to mouse movements.
### Mouse Event Listener:
```js
container.addEventListener("mousemove", (e) => {
let X = (window.innerWidth / 2 - e.pageX) / 30;
let Y = (window.innerHeight / 2 - e.pageY) / 30;
card.style.transition = "none";
card.style.transform = `rotateX(${X}deg) rotateY(${Y}deg)`;
});
```
---
## 3D Image Hover
A slider effect that shifts multiple images along with a 3D hover effect.
### Animation:
```css
.container:hover img:nth-child(4) {
transform: translate(160px, -160px);
opacity: 1;
}
.container:hover img:nth-child(3) {
transform: translate(120px, -120px);
opacity: 0.8;
}
```
---
## 3D Thumb Image Effect
This project demonstrates a 3D effect applied to thumbnail images, including both book and shadow effects.
### Book Effect:
```css
.thumb a:after {
transform: rotateX(90deg);
}
```
### Shadow Effect:
```css
.thumb a:before {
opacity: 0.15;
box-shadow: 0 0 100px rgba(0, 0, 0, 0.5);
}
.thumb:hover a:before {
opacity: 1;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}
```