목록FLiP (4)

비전공자 개발일기

3D Flip Product Card

New Apple Watch $500 Buy Now * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #09383E; } .card { width: 300px; height: 400px; background-color: #FFF; transform-style: preserve-3d; transform: perspective(2000px); transition: 1s; box-shadow: inset 300px 0 50px rgba(0, 0,..
HTML _CSS 2022. 12. 5. 00:29
Flip a Coin

Heads: 0 Tails: 0 Flip Coin Reset *{ padding: 0; margin: 0; box-sizing: border-box; font-family: "Rubik",sans-serif; } body{ height: 100%; background: linear-gradient( to right, #575ce5 50%, #f9fbfc 50% ) fixed; } .container{ background-color: #ffffff; width: 400px; padding: 50px; position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; box-shadow: 15px 30px 35px rgba(0,0,0,0.1)..
Javascript 2022. 11. 24. 07:50
Page Flip

tap the image to flip :root { --duration: 500ms; --ease-in: cubic-bezier(0.85, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.3, 1); --ease-in-out: ease-in-out; --image-current: url(https://images.unsplash.com/photo-1630847911146-edd8828abf14?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzMjUxMjQ0Ng&ixlib=rb-1.2.1&q=85); --image-next: url(https://images.unsplash.com/photo-1..
HTML _CSS 2022. 10. 4. 00:53
FILP CARD

I'm IRONMAN! I'm IRONMAN! Tony Stark * { text-align: center; } .card { width: 200px; height: 220px; position: relative; background-color: transparent; transition: transform .8s; transform-style: preserve-3d; } .card:hover { transform: rotateY(180deg); cursor: pointer; } .front, .back { width: 100%; height: 100%; background-color: #fff; padding-top: 20px; position: absolute; border-radius: 10px; ..
HTML _CSS 2022. 5. 20. 00:49
이전 Prev 1 Next 다음