├── preview └── n223.avif ├── assets └── favicon.webp ├── README.md ├── license.txt ├── index.html └── style.css /preview/n223.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-223/HEAD/preview/n223.avif -------------------------------------------------------------------------------- /assets/favicon.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-223/HEAD/assets/favicon.webp -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Foto Preview](preview/n223.avif)](https://20essentials.github.io/project-000-223) 2 | 3 |
4 | ← 5 |    6 | → 7 |
8 | -------------------------------------------------------------------------------- /license.txt: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 19 | SOFTWARE. 20 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Octaedro 7 | 8 | 9 | 10 | 11 | 12 |
13 | 20 | 28 | 35 | 42 | 49 | 56 | 63 |
64 | 65 | 66 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | -webkit-tap-highlight-color: transparent; 8 | } 9 | 10 | html { 11 | scroll-behavior: smooth; 12 | scrollbar-width: thin; 13 | scrollbar-color: transparent transparent; 14 | 15 | } 16 | 17 | body { 18 | height: 100dvh; 19 | width: 100%; 20 | display: flex; 21 | flex-wrap: wrap; 22 | place-content: center; 23 | background-color: #000; 24 | transform-style: preserve-3d; 25 | perspective: 10000px; 26 | } 27 | 28 | .container { 29 | width: 120px; 30 | height: 120px; 31 | transform-style: preserve-3d; 32 | perspective: 10000px; 33 | position: relative; 34 | animation: girar 8s linear infinite alternate both; 35 | 36 | @media (width <= 1111px) { 37 | zoom: 0.6; 38 | } 39 | } 40 | 41 | .cube { 42 | width: 120px; 43 | height: 120px; 44 | position: absolute; 45 | transform-style: preserve-3d; 46 | perspective: 10000px; 47 | 48 | .side { 49 | width: 100%; 50 | height: 100%; 51 | position: absolute; 52 | background-color: #0002; 53 | background-color: #000; 54 | transform-style: preserve-3d; 55 | perspective: 10000px; 56 | overflow: hidden; 57 | top: 0; 58 | left: 0; 59 | 60 | &::before { 61 | content: ''; 62 | display: block; 63 | position: absolute; 64 | inset: 0; 65 | width: 100%; 66 | height: 100%; 67 | background-image: linear-gradient(45deg, #60efff, #00ff87, #e81cff); 68 | filter: blur(50px); 69 | } 70 | 71 | &.front { 72 | transform: none; 73 | } 74 | 75 | &.behind { 76 | transform: translateZ(-120px); 77 | } 78 | 79 | &.right { 80 | transform-origin: 100% 0%; 81 | transform: rotateY(-90deg); 82 | } 83 | 84 | &.left { 85 | transform-origin: 0% 0%; 86 | transform: rotateY(90deg); 87 | } 88 | 89 | &.top { 90 | transform-origin: 50% 0%; 91 | transform: rotateX(-90deg); 92 | } 93 | &.bottom { 94 | transform-origin: 50% 100%; 95 | transform: rotateX(90deg); 96 | } 97 | } 98 | } 99 | 100 | .triangle { 101 | width: 120px; 102 | height: 120px; 103 | position: absolute; 104 | bottom: 118px; 105 | transform-style: preserve-3d; 106 | perspective: 10000px; 107 | 108 | .side { 109 | transform-style: preserve-3d; 110 | perspective: 10000px; 111 | } 112 | 113 | &.triangle-top { 114 | bottom: -118px; 115 | transform: scale3d(-1, -1, -1) translateZ(118px); 116 | } 117 | 118 | &.triangle-right { 119 | left: 118px; 120 | bottom: 0; 121 | transform: rotate(-90deg) scale(-1); 122 | } 123 | 124 | &.triangle-left { 125 | left: -118px; 126 | bottom: 0; 127 | transform: rotate(-90deg) scaleX(-1); 128 | } 129 | 130 | &.triangle-frontend { 131 | bottom: -1px; 132 | transform: rotate(90deg) rotateX(-90deg) translate(0px, -60px) 133 | translateZ(-116px); 134 | left: -175px; 135 | } 136 | 137 | &.triangle-backend { 138 | bottom: -36px; 139 | transform: rotate(90deg) rotateX(-90deg) scaleY(-1) translate(-36px, -178px) 140 | translateZ(253px); 141 | left: 194px; 142 | } 143 | 144 | .side { 145 | width: 100%; 146 | height: 100%; 147 | clip-path: polygon(50% 0, 100% 100%, 0 100%); 148 | position: absolute; 149 | 150 | &.front, 151 | &.behind { 152 | transform-origin: 50% 100%; 153 | } 154 | 155 | &.front { 156 | background-color: #fff8; 157 | transform: rotateX(30deg); 158 | } 159 | 160 | &.behind { 161 | background-color: #00f8; 162 | transform: translateZ(-120px) rotateX(-30deg); 163 | } 164 | 165 | &.right { 166 | transform-origin: 100% 100%; 167 | transform: rotateY(-90deg) rotateX(-30deg); 168 | background-color: #f0f8; 169 | } 170 | &.left { 171 | transform-origin: 0% 100%; 172 | transform: rotateY(90deg) rotateX(-30deg); 173 | background-color: #0f08; 174 | } 175 | } 176 | } 177 | 178 | @keyframes girar { 179 | 0% { 180 | transform: rotateX(0deg) rotateY(0deg); 181 | } 182 | 100% { 183 | transform: rotateX(359deg) rotateY(359deg); 184 | } 185 | } 186 | --------------------------------------------------------------------------------