├── images ├── 1.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg ├── 01.jpg ├── 02.jpg ├── 03.jpg ├── 04.jpg ├── 05.jpg ├── 06.jpg ├── r-3.jpg ├── r1.jpg ├── r2.png └── background.jpg ├── index.html ├── Readme.md └── css └── program.css /images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/3D-Cube-Image-Animation/HEAD/images/1.jpg -------------------------------------------------------------------------------- /images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/3D-Cube-Image-Animation/HEAD/images/2.jpg -------------------------------------------------------------------------------- /images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/3D-Cube-Image-Animation/HEAD/images/3.jpg -------------------------------------------------------------------------------- /images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/3D-Cube-Image-Animation/HEAD/images/4.jpg -------------------------------------------------------------------------------- /images/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/3D-Cube-Image-Animation/HEAD/images/5.jpg -------------------------------------------------------------------------------- /images/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/3D-Cube-Image-Animation/HEAD/images/6.jpg -------------------------------------------------------------------------------- /images/01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/3D-Cube-Image-Animation/HEAD/images/01.jpg -------------------------------------------------------------------------------- /images/02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/3D-Cube-Image-Animation/HEAD/images/02.jpg -------------------------------------------------------------------------------- /images/03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/3D-Cube-Image-Animation/HEAD/images/03.jpg -------------------------------------------------------------------------------- /images/04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/3D-Cube-Image-Animation/HEAD/images/04.jpg -------------------------------------------------------------------------------- /images/05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/3D-Cube-Image-Animation/HEAD/images/05.jpg -------------------------------------------------------------------------------- /images/06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/3D-Cube-Image-Animation/HEAD/images/06.jpg -------------------------------------------------------------------------------- /images/r-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/3D-Cube-Image-Animation/HEAD/images/r-3.jpg -------------------------------------------------------------------------------- /images/r1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/3D-Cube-Image-Animation/HEAD/images/r1.jpg -------------------------------------------------------------------------------- /images/r2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/3D-Cube-Image-Animation/HEAD/images/r2.png -------------------------------------------------------------------------------- /images/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aoudumber-Bade/3D-Cube-Image-Animation/HEAD/images/background.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 3D Cube - For Crush | Aoudumber Bade 11 | 12 | 13 | 14 |
15 | I Love You 💗 16 |
17 | 18 |
19 | 20 |
21 |
22 | 23 |
24 |
25 | 26 |
27 |
28 | 29 |
30 |
31 | 32 |
33 |
34 | 35 |
36 |
37 | 38 |
39 |
40 | 41 |
42 |
43 | 44 |
45 |
46 | 47 |
48 |
49 | 50 |
51 |
52 | 53 |
54 |
55 | 56 |
57 |
58 | 59 |
60 |
61 |
62 |
63 |
64 |
65 | 66 |
67 |
68 |
69 | 70 |
71 |

OG Creator @aoudumber.dev

73 |
74 | 75 | 76 | -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | # 💖 I Love You 3D Cube Animation 🚀 2 | *A rotating cube with a secret message, hover effects, and endless vibes – perfect for coders, lovers, and Gen Z chaos enthusiasts.* 3 | 4 | --- 5 | 6 | ## ✨ Features 7 | - **360° Infinite Rotation**: Hypnotic spin powered by CSS/JS. 8 | - **Hover to Scale**: Outer cube grows on hover (because drama). 9 | - **Image Gallery Cube**: Each side displays custom images. 10 | - **"I Love You" Text**: Subtle? Nah. Bold? Always. 💌 11 | - **Responsive Design**: Works on screens *and* hearts. 12 | 13 | --- 14 | 15 | ## 🛠️ Installation 16 | 1. Clone the repo: 17 | ```bash 18 | git clone https://github.com/Aoudumber-Bade/3D-Cube-Image-Animation.git 19 | 20 | 2. Open index.html in your browser. 21 | 🎮 Usage 22 | - **Hover**: Outer cube scales up (hover harder for ✨effect✨). 23 | - **Rotate Forever**: Cube spins infinitely (like my thoughts at 3 AM). 24 | - **Customize**: Replace side images, tweak colors, or change the message to "I Love Code". 25 | 26 | *Pro Tip: Send the live link to your crush and say, "This cube runs smoother than my rizz."* 27 | 28 | --- 29 | 30 | ## 🔧 Customization 31 | Edit these files to make it yours: 32 | - **Change images**: Replace `/assets` images (keep dimensions square!). 33 | - **Adjust animation speed**: Tweak `animation-duration` in `styles.css`. 34 | - **Edit the message**: Modify the "I Love You" text in `index.html`. 35 | 36 | --- 37 | 38 | ## 🌈 Tech Stack 39 | - HTML5 40 | - CSS3 (Animations & Transforms) 41 | - JavaScript (For hover interactions) 42 | 43 | --- 44 | 45 | ## 🤝 Credits 46 | - Inspired by: Sleep deprivation and CSS-Tricks. 47 | - Cube logic: Built with pure math (and caffeine). 48 | 49 | --- 50 | 51 | ## 📄 License 52 | MIT License – do whatever, just credit me if you clone it for your crush. 53 | 54 | --- 55 | 56 | **Made with ❤️ by Aoudumber Bade** 57 | *Tag me if you remix this!* 58 | 59 | 🚀 **Star this repo if you’d code this for someone!** 60 | 🔗 **Live Demo:** [https://3d-cube-dev.netlify.app/](https://3d-cube-dev.netlify.app/) 61 | 62 | --- 63 | 64 | ### 🔥 Contribute 65 | - Fork, tweak, and PR! 66 | - Ideas? Open an issue – let’s collab! 67 | 68 | --- 69 | 70 | **Why this repo?** 71 | - Coders: Learn CSS animations & transforms. 72 | - Lovers: Literally send this as a digital love letter. 73 | - Gen Z: Flex your "tech heartthrob" era. 74 | 75 | --- 76 | 77 | *(Keep the vibe fun and light – GitHub doesn’t have to be boring!)* 🦄 78 | 79 | 80 | -------------------------------------------------------------------------------- /css/program.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0px; 3 | padding: 0px; 4 | } 5 | 6 | html { 7 | overflow: hidden; 8 | height: 100%; 9 | background: linear-gradient(rgb(245 69 69 / 77%), rgb(255 39 205 / 84%)), url(../images/background.jpg); 10 | } 11 | 12 | body { 13 | width: 100vw; 14 | height: 95vh; 15 | display: flex; 16 | flex-direction: column; 17 | justify-content: center; 18 | align-items: center; 19 | gap: 9px; 20 | } 21 | 22 | .title { 23 | color: rgb(238, 255, 255); 24 | text-align: center; 25 | text-shadow: /* 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135 */; 26 | font-size: 2.2rem; 27 | font-weight: 800; 28 | letter-spacing: 11px; 29 | margin-top: -87px !important; 30 | text-transform: uppercase; 31 | /* justify-self: flex-start; */ 32 | } 33 | 34 | .cube { 35 | position: relative; 36 | margin: 0px auto; 37 | margin-top: 15%; 38 | /* margin-left: 42%; */ 39 | width: 200px; 40 | height: 200px; 41 | transform: rotateX(-30deg) rotateY(-80deg); 42 | transform-style: preserve-3d; 43 | animation: rotate 15s infinite; 44 | } 45 | 46 | .cube .outer-cube, 47 | .cube .inner-cube { 48 | transform-style: preserve-3d; 49 | } 50 | 51 | /* 旋转立方体 */ 52 | @keyframes rotate { 53 | from { 54 | transform: rotateX(0deg) rotateY(0deg); 55 | } 56 | 57 | to { 58 | transform: rotateX(360deg) rotateY(360deg); 59 | } 60 | } 61 | 62 | /* 外层立方体样式 */ 63 | .outer-cube .outer-top, 64 | .outer-cube .outer-bottom, 65 | .outer-cube .outer-right, 66 | .outer-cube .outer-left, 67 | .outer-cube .outer-front, 68 | .outer-cube .outer-back { 69 | position: absolute; 70 | top: 0; 71 | left: 0; 72 | width: 180px; 73 | height: 200px; 74 | border: 1px solid #fff; 75 | opacity: 0.3; 76 | transition: all .9s; 77 | background-size: cover; /* Ensures the image covers the full area */ 78 | background-position: center; /* Centers the image */ 79 | background-repeat: no-repeat; 80 | } 81 | 82 | .outer-cube img { 83 | width: 100%; 84 | height: 210px; 85 | object-fit: cover; /* Ensures the image fills the container without stretching */ 86 | 87 | } 88 | 89 | 90 | .outer-top { 91 | transform: rotateX(90deg) translateZ(100px); 92 | } 93 | 94 | .outer-bottom { 95 | transform: rotateX(-90deg) translateZ(100px); 96 | } 97 | 98 | .outer-front { 99 | transform: rotateY(0deg) translateZ(100px); 100 | } 101 | 102 | .outer-back { 103 | transform: translateZ(-100px) rotateY(180deg); 104 | } 105 | 106 | .outer-left { 107 | transform: rotateY(90deg) translateZ(100px); 108 | } 109 | 110 | .outer-right { 111 | transform: rotateY(-90deg) translateZ(100px); 112 | } 113 | 114 | /* 嵌套的内层立方体样式 */ 115 | .inner-cube>div { 116 | position: absolute; 117 | top: 35px; 118 | left: 35px; 119 | width: 130px; 120 | height: 130px; 121 | } 122 | 123 | .inner-cube img { 124 | width: 130px; 125 | height: 130px; 126 | } 127 | 128 | .inner-top { 129 | transform: rotateX(90deg) translateZ(65px); 130 | } 131 | 132 | .inner-bottom { 133 | transform: rotateX(-90deg) translateZ(65px); 134 | } 135 | 136 | .inner-front { 137 | transform: rotateY(0deg) translateZ(65px); 138 | } 139 | 140 | .inner-back { 141 | transform: translateZ(-65px) rotateY(180deg); 142 | } 143 | 144 | .inner-left { 145 | transform: rotateY(90deg) translateZ(65px); 146 | } 147 | 148 | .inner-right { 149 | transform: rotateY(-90deg) translateZ(65px); 150 | } 151 | 152 | .cube:hover .outer-top { 153 | right: -70px; 154 | bottom: -70px; 155 | opacity: 0.8; 156 | transform: rotateX(90deg) translateZ(200px); 157 | } 158 | 159 | .cube:hover .outer-bottom { 160 | right: -70px; 161 | bottom: -70px; 162 | opacity: 0.8; 163 | transform: rotateX(-90deg) translateZ(200px); 164 | } 165 | 166 | .cube:hover .outer-front { 167 | right: -70px; 168 | bottom: -70px; 169 | opacity: 0.8; 170 | transform: rotateY(0deg) translateZ(200px); 171 | } 172 | 173 | .cube:hover .outer-back { 174 | right: -70px; 175 | bottom: -70px; 176 | opacity: 0.8; 177 | transform: translateZ(-200px) rotateY(180deg); 178 | } 179 | 180 | #copy { 181 | position: fixed; 182 | bottom: 12px; 183 | left: 50%; 184 | transform: translateX(-50%); 185 | font-size: 1rem; 186 | } 187 | 188 | #copy a { 189 | text-decoration: none; 190 | color: #191919d7; 191 | } 192 | 193 | #copy p { 194 | color: #fff6f9; 195 | text-align: center; 196 | font-weight: 700; 197 | cursor: pointer; 198 | } 199 | 200 | 201 | .cube:hover .outer-left { 202 | right: -70px; 203 | bottom: -70px; 204 | opacity: 0.8; 205 | transform: rotateY(90deg) translateZ(200px); 206 | } 207 | 208 | .cube:hover .outer-right { 209 | right: -70px; 210 | bottom: -70px; 211 | opacity: 0.8; 212 | transform: rotateY(-90deg) translateZ(200px); 213 | } 214 | 215 | .message .author { 216 | position: absolute; 217 | right: 50px; 218 | background-image: -webkit-linear-gradient(left, blue, #66ffff 10%, #cc00ff 20%, #CC00CC 30%, #CCCCFF 40%, #00FFFF 50%, #CCCCFF 60%, #CC00CC 70%, #CC00FF 80%, #66FFFF 90%, blue 100%); 219 | font-size: 35px; 220 | -webkit-text-fill-color: transparent; 221 | -webkit-background-clip: text; 222 | -webkit-background-size: 200% 100%; 223 | -webkit-animation: masked-animation 4s linear infinite; 224 | } 225 | 226 | @keyframes masked-animation { 227 | 0% { 228 | background-position: 0 0; 229 | } 230 | 231 | 100% { 232 | background-position: -100% 0; 233 | } 234 | } 235 | 236 | .message .tip { 237 | position: absolute; 238 | /* right: 10px; */ 239 | left: 50%; 240 | transform: translateX(-50%); 241 | bottom: 30px; 242 | margin-top: 60px; 243 | color: white; 244 | font-size: 18px; 245 | } --------------------------------------------------------------------------------