diff --git a/README.md b/README.md index 85fcb99..45a812f 100644 --- a/README.md +++ b/README.md @@ -1 +1,3 @@ -# css_effect \ No newline at end of file +# 3D Text Cube Animation Effects + +View and try [DEMO](https://codepen.io/filippoerbisti/pen/PoQJKyd) on Codepen. diff --git a/index.html b/index.html new file mode 100644 index 0000000..4479ab5 --- /dev/null +++ b/index.html @@ -0,0 +1,39 @@ + + + + + + + 3D Text Cube Animation Effects + + + +
+
+ 2 + 3 + 4 + 5 +
+
+ 0 + 1 + 2 + 3 +
+
+ 2 + 3 + 4 + 5 +
+
+ 2 + 3 + 4 + 5 +
+
+ + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..5173b0f --- /dev/null +++ b/style.css @@ -0,0 +1,77 @@ +@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Oswald', sans-serif; +} + +body { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: #3d3d3d; +} + +.container { + display: flex; + transform-style: preserve-3d; + gap: 10px; + transform: rotateY(30deg) rotateX(10deg); +} + +.container .text { + position: relative; + width: 100px; + height: 100px; + transform-style: preserve-3d; + transition: 2.5s ease-in-out; + transition-delay: calc(0.25s * var(--j)); +} + +.container:hover .text { + transform: rotateX(360deg); + + +} + +.container:hover .text:last-child { + transform: rotateX(630deg); +} + +.container .text::before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + background: #373737; + transform-origin: left; + transform: rotateY(90deg) translateX(-50px); +} + +.container .text:last-child:before { + background: #29ab3c; +} + +.container .text span { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(#434343, #535353); + display: flex; + align-items: center; + justify-content: center; + font-size: 4em; + color: #fff; + transform-style: preserve-3d; + transform: rotateX(calc(90deg * var(--i))) translateZ(50px); +} + +.container .text:last-child span { + background: linear-gradient(#29c040, #32ed4e); + color: #333; +}