diff --git a/rotating_box/image/img 1 (1).jpg b/rotating_box/image/img 1 (1).jpg new file mode 100644 index 0000000..848fe55 Binary files /dev/null and b/rotating_box/image/img 1 (1).jpg differ diff --git a/rotating_box/image/img 1 (2).jpg b/rotating_box/image/img 1 (2).jpg new file mode 100644 index 0000000..d8625c8 Binary files /dev/null and b/rotating_box/image/img 1 (2).jpg differ diff --git a/rotating_box/image/img 1 (3).jpg b/rotating_box/image/img 1 (3).jpg new file mode 100644 index 0000000..2bc06d8 Binary files /dev/null and b/rotating_box/image/img 1 (3).jpg differ diff --git a/rotating_box/image/img 1 (4).jpg b/rotating_box/image/img 1 (4).jpg new file mode 100644 index 0000000..9f04c92 Binary files /dev/null and b/rotating_box/image/img 1 (4).jpg differ diff --git a/rotating_box/image/topimg.png b/rotating_box/image/topimg.png new file mode 100644 index 0000000..52c09d6 Binary files /dev/null and b/rotating_box/image/topimg.png differ diff --git a/rotating_box/index.html b/rotating_box/index.html new file mode 100644 index 0000000..3e351da --- /dev/null +++ b/rotating_box/index.html @@ -0,0 +1,23 @@ + + + + + + + Document + + + + +
+
+
+ + + + +
+
+ + + \ No newline at end of file diff --git a/rotating_box/style.css b/rotating_box/style.css new file mode 100644 index 0000000..a4e549f --- /dev/null +++ b/rotating_box/style.css @@ -0,0 +1,74 @@ +*{ + margin: 0; + padding: 0%; + box-sizing: border-box; +} +body{ + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background-color: #050505; +} +.cube{ + position: relative; + width: 300px; + height: 300px; + transform-style: preserve-3d; + transform: rotateX(-30deg); + animation: animate 10s linear infinite; +} +@keyframes animate{ + 0%{ + transform: rotateX(-30deg) rotateY(0deg); + } + 100%{ + transform: rotateX(-30deg) rotateY(360deg); + } +} +.cube div{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-style: preserve-3d; +} +.cube div span{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(#151515,#00ec00); + transform: rotateY(calc(90deg * var(--i))) translateZ(150px); +} +.top{ + position: absolute; + top: 0; + left: 0; + width: 300px; + height: 300px; + background:#222; + transform: rotateX(90deg) translateZ(150px); +} +.top::before{ + content: ''; + position: absolute; + top: 0; + left: 0; + width: 300px; + height: 300px; + background: #0f0; + transform: translateZ(-380px); + filter: blur(20px); + box-shadow: 0 0 120px rgba(0, 255, 0, 0.2), + 0 0 200px rgba(0, 255, 0, 0.4), + 0 0 300px rgba(0, 255, 0, 0.6), + 0 0 400px rgba(0, 255, 0, 0.8), + 0 0 500px rgba(0, 255, 0, 1); +} +.image01{ + height: 100%; + width: 100%; +}