diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 5f87b0f..0000000 --- a/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -MIT License - -Copyright (c) 2026 Ilia Miheev - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..2f66c3e Binary files /dev/null and b/favicon.ico differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..a92f730 --- /dev/null +++ b/index.html @@ -0,0 +1,23 @@ + + + + + + beautiful-cube + + + + +

beautiful-cube

+
+
+
front
+
back
+
left
+
right
+
top
+
bottom
+
+
+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..9500314 --- /dev/null +++ b/style.css @@ -0,0 +1,81 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +::selection { + background-color: orangered; + color: white; +} + +body { + background-color: #222; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100vh; + overflow: hidden; + color: white; +} + +h1 { + position: fixed; + top: 10px; +} + +#wrapper { + perspective: 600px; +} + +.cube { + width: 200px; + height: 200px; + transform-style: preserve-3d; + animation: rotateCube 6s infinite linear; +} + +.face { + position: absolute; + width: 200px; + height: 200px; + border: 2px solid orangered; + text-align: center; + padding-top: 50%; + font-size: 20px; +} + +.front { + transform: rotateY(0deg) translateZ(100px); +} + +.back { + transform: rotateY(180deg) translateZ(100px); +} + +.left { + transform: rotateY(-90deg) translateZ(100px); +} + +.right { + transform: rotateY(90deg) translateZ(100px); +} + +.top { + transform: rotateX(90deg) translateZ(100px); +} + +.bottom { + transform: rotateX(-90deg) translateZ(100px); +} + +@keyframes rotateCube { + 0% { + transform: rotateX(0deg); + } + + 100% { + transform: rotateX(360deg) rotateY(360deg); + } +}