목록rotate (6)

비전공자 개발일기

3D Cube Slider

.gallery { --s: 250px; /* the size */ display: grid; transform-style: preserve-3d; --_p: perspective(calc(2.5*var(--s))); animation: r 9s infinite cubic-bezier(.5,-0.5,.5,1.5); } .gallery img { grid-area: 1/1; width: var(--s); aspect-ratio: 1; object-fit: cover; transform: var(--_t,) translateZ(calc(var(--s)/2)); } .gallery img:nth-child(2) {--_t: rotateX(-90deg)} .gallery img:nth-child(3) {--_t..
HTML _CSS 2023. 1. 17. 00:03
Intro Text Animation

Avengers Assemble * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { background: radial-gradient(#93D9F9, #0C80B5); min-height: 100vh; overflow: hidden; } body::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 70vh; background-color: rgba(0, 0, 0, .1); } section { display: flex; justify-content: center; align-items: center; min-height: ..
HTML _CSS 2023. 1. 11. 00:40
Rotating 3D Image Cube

* { background-color: #2598EB; } .wrapper { --imagesize: 300px; --transform: calc(var(--imagesize) / 2); perspective: 800px; } .wrapper:hover { transform: scale(1.5); } .cube { transform-style: preserve-3d; position: relative; width: var(--imagesize); height: var(--imagesize); animation: rotate 10s ease-in-out infinite; transform-origin: center center; margin: 250px auto; } .side { position: abs..
HTML _CSS 2022. 7. 22. 00:10
Card Animation

K * { margin: 100px auto; } .card { background: #5ce1e6; font-size: 50px; width: 100px; height: 100px; border-radius: 4px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 7px 0 rgb(211,247,248), 0 6px 15px 0 rgb(189, 243, 245); animation: rotate 5s cubic-bezier(.54, .13, .30, .87) } @keyframes rotate { 0% {transform: rotateY(0turn)} 100% {transform: rotateY(10turn)..
HTML _CSS 2022. 4. 15. 00:35
Loading Animation

Loading Animation .loader-wrapper { width: 60px; height:60px; } .loader { box-sizing: border-box; width: 100%; height: 100%; border: 10px solid #162534; border-top-color: #4bc8eb; border-bottom-color: #f13a8f; border-radius: 50%; animation: rotate 5s linear infinite; } .loader-inner { border-top-color: #36f372; border-bottom-color: #fff; animation-duration: 2.5s; } @keyframes rotate { 0%{ transf..
HTML _CSS 2022. 4. 12. 00:27
Javascript - Rotating Navigation

Amazing Article Florin pop Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam sint non error placeat perspiciatis tempora iste magnam atque nam, voluptates nemo! Nostrum quaerat ullam ea optio corrupti, saepe reiciendis, dolores asperiores maxime odit consectetur, error impedit laboriosam! At provident debitis laudantium repudiandae modi ad dolores voluptatibus, vero, necessitati..
Javascript 2021. 9. 27. 00:38
이전 Prev 1 Next 다음