HTML
<div id='wrap'> <input class='initial' type='checkbox'> <input class='wheel1' name='wheel' type='radio'> <input class='wheel2' name='wheel' type='radio'> <input class='wheel3' name='wheel' type='radio'> <input class='wheel4' name='wheel' type='radio'> <input class='buy' type='checkbox'> <h1>Configure the Bike</h1> <h2>Added to Cart</h2> <h3>Wheels</h3> <div class='wheeltoggle'></div> <div class='wheeltoggle'></div> <div class='wheeltoggle'></div> <div class='wheeltoggle'></div> <div class='buy'></div> <div class='toggle expand'> <i class='fas fa-bicycle'></i> </div> <div class='toggle'> <i class='fas fa-bicycle'></i> </div> <div class='background'></div> <div class='frame'> <div class='rear'></div> <div class='stem'></div> <div class='shaft'></div> <div class='seat'></div> <div class='wheel one front'> <div class='inner'></div> </div> <div class='wheel one back'> <div class='inner'></div> </div> </div> </div>
body { display: grid; place-items: center; height: 100vh; font-family: "Roboto"; background: #dfe1eb; } body #wrap { width: 800px; height: 550px; background: #efefef; box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.25); position: relative; border-radius: 5px; overflow: hidden; display: grid; grid-template-columns: repeat(15, 1fr); grid-template-rows: repeat(15, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; } body #wrap h1, body #wrap h2 { grid-area: 4 / 10 / 5 / 15; color: #000; position: relative; z-index: 9; font-size: 28px; -webkit-transition: 0.4s cubic-bezier(0.75, 0.885, 0.32, 1); transition: 0.4s cubic-bezier(0.75, 0.885, 0.32, 1); text-align: right; opacity: 0.25; } body #wrap h2 { grid-area: 4 / 2 / 5 / 7; text-align: left; -webkit-transform: translateY(100px); transform: translateY(100px); opacity: 0; } body #wrap h3 { position: relative; z-index: 9; grid-area: 10 / 11 / 11 / 12; opacity: 0.25; -webkit-transition: 0.4s cubic-bezier(0.75, 0.885, 0.32, 1); transition: 0.4s cubic-bezier(0.75, 0.885, 0.32, 1); } body #wrap .toggle { width: 30px; height: 30px; box-shadow: -5px 0 0 rgba(255, 255, 255, 0.15); z-index: 9; background: rgba(255, 255, 255, 0.05); position: relative; grid-area: 4 / 2 / 5 / 3; -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; } body #wrap .toggle.expand:before { content: "IF Mode"; position: absolute; color: #fff; top: -40px; width: 100px; font-weight: 900; } body #wrap .toggle i { color: #fff; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } body #wrap .toggle:not(.expand) { margin-top: 40px; box-shadow: -5px 0 0 #ff6a5e; } body #wrap .toggle:not(.expand) i { -webkit-transform: translate(-50%, -50%) rotate(-90deg); transform: translate(-50%, -50%) rotate(-90deg); } body #wrap input { cursor: pointer; opacity: 0; } body #wrap .buy { grid-area: 14 / 3 / 15 / 5; background: #ff6a5e; position: relative; height: 50px; left: 40px; border-radius: 3px; z-index: 9; -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; -webkit-transform: translateY(200px); transform: translateY(200px); } body #wrap .buy:not(input) { pointer-events: none; -webkit-animation: fadein 0.2s ease-in-out 1 forwards; animation: fadein 0.2s ease-in-out 1 forwards; } @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } body #wrap .buy:not(input):after { content: "Buy Now"; position: absolute; width: 100%; height: 100%; box-shadow: 0 0 0 1px #ff6a5e; border-radius: inherit; right: calc(100% + 10px); top: 0; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; color: #ff6a5e; cursor: pointer; -webkit-transition: 0.6s ease-in-out; transition: 0.6s ease-in-out; -webkit-transform: translateY(200px); transform: translateY(200px); } body #wrap .buy:before { content: "Check Out"; width: 100%; height: 100%; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; color: #fff; -webkit-animation: buynow 1s ease-in-out 1 forwards; animation: buynow 1s ease-in-out 1 forwards; } @-webkit-keyframes buynow { 0% { opacity: 0; } 100% { opacity: 1; content: "Check Out"; } } @keyframes buynow { 0% { opacity: 0; } 100% { opacity: 1; content: "Check Out"; } } body #wrap input.initial { position: relative; grid-area: 4 / 2 / 5 / 3; z-index: 999; width: 30px; height: 70px; opacity: 0; } body #wrap input.initial:first-of-type:hover ~ .toggle.expand { background: #ff6a5e; } body #wrap input.initial:checked { pointer-events: none; } body #wrap input.initial:checked ~ .toggle:not(.expand) { -webkit-transform: translateX(-100px); transform: translateX(-100px); } body #wrap input.initial:checked ~ input[type="radio"] { pointer-events: all; } body #wrap input.initial:checked ~ .wheeltoggle, body #wrap input.initial:checked ~ h3, body #wrap input.initial:checked ~ h1 { -webkit-filter: saturate(1); filter: saturate(1); opacity: 1; } body #wrap input.initial:checked ~ .buy { -webkit-transform: translateY(0); transform: translateY(0); min-width: 110px; -webkit-transition-delay: 1s; transition-delay: 1s; } body #wrap input.initial:checked ~ .buy:after { -webkit-transform: translateY(200px); transform: translateY(200px); } body #wrap input.initial:checked ~ .buy:checked { -webkit-transform: translateY(-250px); transform: translateY(-250px); } body #wrap input.initial:checked ~ .buy:checked ~ .toggle { opacity: 0; } body #wrap input.initial:checked ~ .buy:checked ~ .frame .wheel .inner { -webkit-animation: wheelroll6 1.25s ease-in-out 1 forwards; animation: wheelroll6 1.25s ease-in-out 1 forwards; } body #wrap input.initial:checked ~ .buy:checked ~ h2 { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-transition-delay: 0.4s; transition-delay: 0.4s; opacity: 1; } body #wrap input.initial:checked ~ .buy:checked ~ .wheeltoggle, body #wrap input.initial:checked ~ .buy:checked ~ h1, body #wrap input.initial:checked ~ .buy:checked ~ h3 { -webkit-transform: translateY(100px); transform: translateY(100px); opacity: 0; } body #wrap input.initial:checked ~ .buy:checked ~ .wheeltoggle:nth-of-type(1) { -webkit-transition-delay: 0.05s; transition-delay: 0.05s; } body #wrap input.initial:checked ~ .buy:checked ~ .wheeltoggle:nth-of-type(2) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } body #wrap input.initial:checked ~ .buy:checked ~ .wheeltoggle:nth-of-type(3) { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } body #wrap input.initial:checked ~ .buy:checked ~ .wheeltoggle:nth-of-type(4) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } body #wrap input.initial:checked ~ .buy:checked ~ h3 { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } body #wrap input.initial:checked ~ .buy:checked ~ .buy { -webkit-animation: bounceback 1s ease-in-out 1 forwards; animation: bounceback 1s ease-in-out 1 forwards; } body #wrap input.initial:checked ~ .buy:checked ~ .buy:after { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } body #wrap input.initial:checked ~ .buy:checked ~ .buy:before { -webkit-animation: buynow2 1s ease-in-out 1 forwards; animation: buynow2 1s ease-in-out 1 forwards; } @-webkit-keyframes buynow2 { 100% { content: "Back"; } } @keyframes buynow2 { 100% { content: "Back"; } } @-webkit-keyframes bounceback { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(200px); transform: translateY(200px); } 50.5% { -webkit-transform: translateY(200px); transform: translateY(200px); opacity: 0; } 51% { -webkit-transform: translateY(-200px); transform: translateY(-200px); opacity: 0; } 100% { -webkit-transform: translateY(-250px); transform: translateY(-250px); } } @keyframes bounceback { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(200px); transform: translateY(200px); } 50.5% { -webkit-transform: translateY(200px); transform: translateY(200px); opacity: 0; } 51% { -webkit-transform: translateY(-200px); transform: translateY(-200px); opacity: 0; } 100% { -webkit-transform: translateY(-250px); transform: translateY(-250px); } } body #wrap input.initial:checked ~ .buy:checked ~ .frame:not(.two):not(i):not(.buy) { -webkit-transform: scale(0.7) translateX(350px) translateY(50px); transform: scale(0.7) translateX(350px) translateY(50px); -webkit-transition: 0.75s cubic-bezier(0.75, 0.885, 0.32, 1); transition: 0.75s cubic-bezier(0.75, 0.885, 0.32, 1); -webkit-transition-delay: 0.25s; transition-delay: 0.25s; } body #wrap input.initial:checked ~ .buy:checked ~ .background:before { -webkit-transition: left 0.4s cubic-bezier(0.75, 0.885, 0.32, 1), -webkit-transform 0.4s cubic-bezier(0.75, 0.885, 0.32, 1) !important; transition: left 0.4s cubic-bezier(0.75, 0.885, 0.32, 1), -webkit-transform 0.4s cubic-bezier(0.75, 0.885, 0.32, 1) !important; transition: transform 0.4s cubic-bezier(0.75, 0.885, 0.32, 1), left 0.4s cubic-bezier(0.75, 0.885, 0.32, 1) !important; transition: transform 0.4s cubic-bezier(0.75, 0.885, 0.32, 1), left 0.4s cubic-bezier(0.75, 0.885, 0.32, 1), -webkit-transform 0.4s cubic-bezier(0.75, 0.885, 0.32, 1) !important; -webkit-transition-delay: 0.4s, 0.8s !important; transition-delay: 0.4s, 0.8s !important; -webkit-transform-origin: right; transform-origin: right; -webkit-transform: scaleX(2) !important; transform: scaleX(2) !important; left: -5%; } body #wrap input.initial:checked ~ .buy:checked ~ .background:after { -webkit-transform: scaleY(1.25) translateX(-40px) !important; transform: scaleY(1.25) translateX(-40px) !important; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } body #wrap input.initial:checked ~ .buy:not(div) { pointer-events: all; z-index: 999; } body #wrap input.initial:checked ~ .buy:not(div):hover ~ .buy { -webkit-transition-delay: 0s; transition-delay: 0s; background: #ff3b2b; } body #wrap .wheeltoggle { box-shadow: 0 0 0 1px #efefef, 0 10px 20px -20px #4e567d; border-radius: 3px; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; pointer-events: none; -webkit-filter: saturate(0); filter: saturate(0); opacity: 0.5; background: #fff; z-index: 9; } body #wrap .wheeltoggle:before { content: ""; position: absolute; width: 100%; height: 50px; top: 0; -webkit-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; } body #wrap .wheeltoggle:nth-of-type(1):after { content: "Wheel Type 1"; position: absolute; width: 100%; top: 55px; font-size: 10px; text-align: center; line-height: 1.25; color: #4e567d; text-transform: uppercase; } body #wrap .wheeltoggle:nth-of-type(1):before { background: url(https://assets.codepen.io/383755/wheel1.png) 50% 50%/80% auto no-repeat; } body #wrap .wheeltoggle:nth-of-type(2):after { content: "Wheel Type 2"; position: absolute; width: 100%; top: 55px; font-size: 10px; text-align: center; line-height: 1.25; color: #4e567d; text-transform: uppercase; } body #wrap .wheeltoggle:nth-of-type(2):before { background: url(https://assets.codepen.io/383755/wheel2.png) 50% 50%/80% auto no-repeat; } body #wrap .wheeltoggle:nth-of-type(3):after { content: "Wheel Type 3"; position: absolute; width: 100%; top: 55px; font-size: 10px; text-align: center; line-height: 1.25; color: #4e567d; text-transform: uppercase; } body #wrap .wheeltoggle:nth-of-type(3):before { background: url(https://assets.codepen.io/383755/wheel3.png) 50% 50%/80% auto no-repeat; } body #wrap .wheeltoggle:nth-of-type(4):after { content: "Wheel Type 4"; position: absolute; width: 100%; top: 55px; font-size: 10px; text-align: center; line-height: 1.25; color: #4e567d; text-transform: uppercase; } body #wrap .wheeltoggle:nth-of-type(4):before { background: url(https://assets.codepen.io/383755/wheel4.png) 50% 50%/80% auto no-repeat; } body #wrap input[type="radio"], body #wrap .wheeltoggle { position: absolute; z-index: 999; width: 50px; height: 90px; z-index: 999; pointer-events: none; } body #wrap input[type="radio"].wheel1, body #wrap input[type="radio"]:not(input):nth-of-type(1), body #wrap .wheeltoggle.wheel1, body #wrap .wheeltoggle:not(input):nth-of-type(1) { grid-area: 11 / 14 / 12 / 15; } body #wrap input[type="radio"].wheel2, body #wrap input[type="radio"]:not(input):nth-of-type(2), body #wrap .wheeltoggle.wheel2, body #wrap .wheeltoggle:not(input):nth-of-type(2) { grid-area: 11 / 13 / 12 / 14; } body #wrap input[type="radio"].wheel3, body #wrap input[type="radio"]:not(input):nth-of-type(3), body #wrap .wheeltoggle.wheel3, body #wrap .wheeltoggle:not(input):nth-of-type(3) { grid-area: 11 / 12 / 12 / 13; } body #wrap input[type="radio"].wheel4, body #wrap input[type="radio"]:not(input):nth-of-type(4), body #wrap .wheeltoggle.wheel4, body #wrap .wheeltoggle:not(input):nth-of-type(4) { grid-area: 11 / 11 / 12 / 12; } body #wrap input[type="radio"].wheel1:checked ~ .wheeltoggle:nth-of-type(1), body #wrap .wheeltoggle.wheel1:checked ~ .wheeltoggle:nth-of-type(1) { box-shadow: 0 0 0 1px #ff6a5e, 0 10px 20px -30px #4e567d; } body #wrap input[type="radio"].wheel1:hover ~ .wheeltoggle:nth-of-type(1), body #wrap .wheeltoggle.wheel1:hover ~ .wheeltoggle:nth-of-type(1) { box-shadow: 0 0 0 1px #efefef, 0 10px 20px -10px #4e567d; -webkit-transform: scale(1.05); transform: scale(1.05); } body #wrap input[type="radio"].wheel1:hover ~ .wheeltoggle:nth-of-type(1):before, body #wrap .wheeltoggle.wheel1:hover ~ .wheeltoggle:nth-of-type(1):before { -webkit-transform: rotate(180deg); transform: rotate(180deg); } body #wrap input[type="radio"].wheel1:checked ~ .frame > div.wheel, body #wrap .wheeltoggle.wheel1:checked ~ .frame > div.wheel { -webkit-animation: wheelout1 0.75s ease-in-out 1 forwards 0.25s; animation: wheelout1 0.75s ease-in-out 1 forwards 0.25s; } body #wrap input[type="radio"].wheel1:checked ~ .frame > div.wheel .inner:before, body #wrap .wheeltoggle.wheel1:checked ~ .frame > div.wheel .inner:before { background-image: url(https://assets.codepen.io/383755/wheel1.png); -webkit-animation: wheelroll1 1s ease-in-out 1 forwards 0s; animation: wheelroll1 1s ease-in-out 1 forwards 0s; } @-webkit-keyframes wheelroll1 { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(720deg); transform: rotate(720deg); } } @keyframes wheelroll1 { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(720deg); transform: rotate(720deg); } } @-webkit-keyframes wheelroll6 { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes wheelroll6 { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } body #wrap input[type="radio"].wheel1:checked ~ .frame > div.wheel.back, body #wrap .wheeltoggle.wheel1:checked ~ .frame > div.wheel.back { -webkit-animation: wheelback1 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s; animation: wheelback1 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s; } @-webkit-keyframes wheelback1 { 0% { -webkit-transform: translate(0px); transform: translate(0px); } 50% { -webkit-transform: translateX(-700px); transform: translateX(-700px); } 100% { -webkit-transform: translate(0px); transform: translate(0px); } } @keyframes wheelback1 { 0% { -webkit-transform: translate(0px); transform: translate(0px); } 50% { -webkit-transform: translateX(-700px); transform: translateX(-700px); } 100% { -webkit-transform: translate(0px); transform: translate(0px); } } @-webkit-keyframes wheelout1 { 0% { -webkit-transform: translate(0px); transform: translate(0px); } 50% { -webkit-transform: translateX(700px); transform: translateX(700px); } 100% { -webkit-transform: translate(0px); transform: translate(0px); } } @keyframes wheelout1 { 0% { -webkit-transform: translate(0px); transform: translate(0px); } 50% { -webkit-transform: translateX(700px); transform: translateX(700px); } 100% { -webkit-transform: translate(0px); transform: translate(0px); } } body #wrap input[type="radio"].wheel1:checked ~ .frame > div:not(.wheel), body #wrap .wheeltoggle.wheel1:checked ~ .frame > div:not(.wheel) { -webkit-animation: jump1 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s; animation: jump1 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s; } @-webkit-keyframes jump1 { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-75px) rotate(-2.5deg); transform: translateY(-75px) rotate(-2.5deg); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes jump1 { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-75px) rotate(-2.5deg); transform: translateY(-75px) rotate(-2.5deg); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } body #wrap input[type="radio"].wheel2:checked ~ .wheeltoggle:nth-of-type(2), body #wrap .wheeltoggle.wheel2:checked ~ .wheeltoggle:nth-of-type(2) { box-shadow: 0 0 0 1px #ff6a5e, 0 10px 20px -30px #4e567d; } body #wrap input[type="radio"].wheel2:hover ~ .wheeltoggle:nth-of-type(2), body #wrap .wheeltoggle.wheel2:hover ~ .wheeltoggle:nth-of-type(2) { box-shadow: 0 0 0 1px #efefef, 0 10px 20px -10px #4e567d; -webkit-transform: scale(1.05); transform: scale(1.05); } body #wrap input[type="radio"].wheel2:hover ~ .wheeltoggle:nth-of-type(2):before, body #wrap .wheeltoggle.wheel2:hover ~ .wheeltoggle:nth-of-type(2):before { -webkit-transform: rotate(180deg); transform: rotate(180deg); } body #wrap input[type="radio"].wheel2:checked ~ .frame > div.wheel, body #wrap .wheeltoggle.wheel2:checked ~ .frame > div.wheel { -webkit-animation: wheelout2 0.75s ease-in-out 1 forwards 0.25s; animation: wheelout2 0.75s ease-in-out 1 forwards 0.25s; } body #wrap input[type="radio"].wheel2:checked ~ .frame > div.wheel .inner:before, body #wrap .wheeltoggle.wheel2:checked ~ .frame > div.wheel .inner:before { background-image: url(https://assets.codepen.io/383755/wheel2.png); -webkit-animation: wheelroll2 1s ease-in-out 1 forwards 0s; animation: wheelroll2 1s ease-in-out 1 forwards 0s; } @-webkit-keyframes wheelroll2 { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(720deg); transform: rotate(720deg); } } @keyframes wheelroll2 { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(720deg); transform: rotate(720deg); } } @keyframes wheelroll6 { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } body #wrap input[type="radio"].wheel2:checked ~ .frame > div.wheel.back, body #wrap .wheeltoggle.wheel2:checked ~ .frame > div.wheel.back { -webkit-animation: wheelback2 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s; animation: wheelback2 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s; } @-webkit-keyframes wheelback2 { 0% { -webkit-transform: translate(0px); transform: translate(0px); } 50% { -webkit-transform: translateX(-700px); transform: translateX(-700px); } 100% { -webkit-transform: translate(0px); transform: translate(0px); } } @keyframes wheelback2 { 0% { -webkit-transform: translate(0px); transform: translate(0px); } 50% { -webkit-transform: translateX(-700px); transform: translateX(-700px); } 100% { -webkit-transform: translate(0px); transform: translate(0px); } } @-webkit-keyframes wheelout2 { 0% { -webkit-transform: translate(0px); transform: translate(0px); } 50% { -webkit-transform: translateX(700px); transform: translateX(700px); } 100% { -webkit-transform: translate(0px); transform: translate(0px); } } @keyframes wheelout2 { 0% { -webkit-transform: translate(0px); transform: translate(0px); } 50% { -webkit-transform: translateX(700px); transform: translateX(700px); } 100% { -webkit-transform: translate(0px); transform: translate(0px); } } body #wrap input[type="radio"].wheel2:checked ~ .frame > div:not(.wheel), body #wrap .wheeltoggle.wheel2:checked ~ .frame > div:not(.wheel) { -webkit-animation: jump2 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s; animation: jump2 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s; } @-webkit-keyframes jump2 { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-75px) rotate(-2.5deg); transform: translateY(-75px) rotate(-2.5deg); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes jump2 { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-75px) rotate(-2.5deg); transform: translateY(-75px) rotate(-2.5deg); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } body #wrap input[type="radio"].wheel3:checked ~ .wheeltoggle:nth-of-type(3), body #wrap .wheeltoggle.wheel3:checked ~ .wheeltoggle:nth-of-type(3) { box-shadow: 0 0 0 1px #ff6a5e, 0 10px 20px -30px #4e567d; } body #wrap input[type="radio"].wheel3:hover ~ .wheeltoggle:nth-of-type(3), body #wrap .wheeltoggle.wheel3:hover ~ .wheeltoggle:nth-of-type(3) { box-shadow: 0 0 0 1px #efefef, 0 10px 20px -10px #4e567d; -webkit-transform: scale(1.05); transform: scale(1.05); } body #wrap input[type="radio"].wheel3:hover ~ .wheeltoggle:nth-of-type(3):before, body #wrap .wheeltoggle.wheel3:hover ~ .wheeltoggle:nth-of-type(3):before { -webkit-transform: rotate(180deg); transform: rotate(180deg); } body #wrap input[type="radio"].wheel3:checked ~ .frame > div.wheel, body #wrap .wheeltoggle.wheel3:checked ~ .frame > div.wheel { -webkit-animation: wheelout3 0.75s ease-in-out 1 forwards 0.25s; animation: wheelout3 0.75s ease-in-out 1 forwards 0.25s; } body #wrap input[type="radio"].wheel3:checked ~ .frame > div.wheel .inner:before, body #wrap .wheeltoggle.wheel3:checked ~ .frame > div.wheel .inner:before { background-image: url(https://assets.codepen.io/383755/wheel3.png); -webkit-animation: wheelroll3 1s ease-in-out 1 forwards 0s; animation: wheelroll3 1s ease-in-out 1 forwards 0s; } @-webkit-keyframes wheelroll3 { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(720deg); transform: rotate(720deg); } } @keyframes wheelroll3 { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(720deg); transform: rotate(720deg); } } @keyframes wheelroll6 { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } body #wrap input[type="radio"].wheel3:checked ~ .frame > div.wheel.back, body #wrap .wheeltoggle.wheel3:checked ~ .frame > div.wheel.back { -webkit-animation: wheelback3 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s; animation: wheelback3 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s; } @-webkit-keyframes wheelback3 { 0% { -webkit-transform: translate(0px); transform: translate(0px); } 50% { -webkit-transform: translateX(-700px); transform: translateX(-700px); } 100% { -webkit-transform: translate(0px); transform: translate(0px); } } @keyframes wheelback3 { 0% { -webkit-transform: translate(0px); transform: translate(0px); } 50% { -webkit-transform: translateX(-700px); transform: translateX(-700px); } 100% { -webkit-transform: translate(0px); transform: translate(0px); } } @-webkit-keyframes wheelout3 { 0% { -webkit-transform: translate(0px); transform: translate(0px); } 50% { -webkit-transform: translateX(700px); transform: translateX(700px); } 100% { -webkit-transform: translate(0px); transform: translate(0px); } } @keyframes wheelout3 { 0% { -webkit-transform: translate(0px); transform: translate(0px); } 50% { -webkit-transform: translateX(700px); transform: translateX(700px); } 100% { -webkit-transform: translate(0px); transform: translate(0px); } } body #wrap input[type="radio"].wheel3:checked ~ .frame > div:not(.wheel), body #wrap .wheeltoggle.wheel3:checked ~ .frame > div:not(.wheel) { -webkit-animation: jump3 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s; animation: jump3 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s; } @-webkit-keyframes jump3 { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-75px) rotate(-2.5deg); transform: translateY(-75px) rotate(-2.5deg); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes jump3 { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-75px) rotate(-2.5deg); transform: translateY(-75px) rotate(-2.5deg); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } body #wrap input[type="radio"].wheel4:checked ~ .wheeltoggle:nth-of-type(4), body #wrap .wheeltoggle.wheel4:checked ~ .wheeltoggle:nth-of-type(4) { box-shadow: 0 0 0 1px #ff6a5e, 0 10px 20px -30px #4e567d; } body #wrap input[type="radio"].wheel4:hover ~ .wheeltoggle:nth-of-type(4), body #wrap .wheeltoggle.wheel4:hover ~ .wheeltoggle:nth-of-type(4) { box-shadow: 0 0 0 1px #efefef, 0 10px 20px -10px #4e567d; -webkit-transform: scale(1.05); transform: scale(1.05); } body #wrap input[type="radio"].wheel4:hover ~ .wheeltoggle:nth-of-type(4):before, body #wrap .wheeltoggle.wheel4:hover ~ .wheeltoggle:nth-of-type(4):before { -webkit-transform: rotate(180deg); transform: rotate(180deg); } body #wrap input[type="radio"].wheel4:checked ~ .frame > div.wheel, body #wrap .wheeltoggle.wheel4:checked ~ .frame > div.wheel { -webkit-animation: wheelout4 0.75s ease-in-out 1 forwards 0.25s; animation: wheelout4 0.75s ease-in-out 1 forwards 0.25s; } body #wrap input[type="radio"].wheel4:checked ~ .frame > div.wheel .inner:before, body #wrap .wheeltoggle.wheel4:checked ~ .frame > div.wheel .inner:before { background-image: url(https://assets.codepen.io/383755/wheel4.png); -webkit-animation: wheelroll4 1s ease-in-out 1 forwards 0s; animation: wheelroll4 1s ease-in-out 1 forwards 0s; } @-webkit-keyframes wheelroll4 { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(720deg); transform: rotate(720deg); } } @keyframes wheelroll4 { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(720deg); transform: rotate(720deg); } } @keyframes wheelroll6 { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } body #wrap input[type="radio"].wheel4:checked ~ .frame > div.wheel.back, body #wrap .wheeltoggle.wheel4:checked ~ .frame > div.wheel.back { -webkit-animation: wheelback4 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s; animation: wheelback4 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s; } @-webkit-keyframes wheelback4 { 0% { -webkit-transform: translate(0px); transform: translate(0px); } 50% { -webkit-transform: translateX(-700px); transform: translateX(-700px); } 100% { -webkit-transform: translate(0px); transform: translate(0px); } } @keyframes wheelback4 { 0% { -webkit-transform: translate(0px); transform: translate(0px); } 50% { -webkit-transform: translateX(-700px); transform: translateX(-700px); } 100% { -webkit-transform: translate(0px); transform: translate(0px); } } @-webkit-keyframes wheelout4 { 0% { -webkit-transform: translate(0px); transform: translate(0px); } 50% { -webkit-transform: translateX(700px); transform: translateX(700px); } 100% { -webkit-transform: translate(0px); transform: translate(0px); } } @keyframes wheelout4 { 0% { -webkit-transform: translate(0px); transform: translate(0px); } 50% { -webkit-transform: translateX(700px); transform: translateX(700px); } 100% { -webkit-transform: translate(0px); transform: translate(0px); } } body #wrap input[type="radio"].wheel4:checked ~ .frame > div:not(.wheel), body #wrap .wheeltoggle.wheel4:checked ~ .frame > div:not(.wheel) { -webkit-animation: jump4 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s; animation: jump4 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s; } @-webkit-keyframes jump4 { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-75px) rotate(-2.5deg); transform: translateY(-75px) rotate(-2.5deg); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes jump4 { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-75px) rotate(-2.5deg); transform: translateY(-75px) rotate(-2.5deg); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } body #wrap input[type="radio"]:checked ~ .frame > div:not(.wheel), body #wrap .wheeltoggle:checked ~ .frame > div:not(.wheel) { -webkit-animation: jump 1s ease-in-out 1 forwards; animation: jump 1s ease-in-out 1 forwards; } body #wrap input.initial:checked ~ .toggle { box-shadow: -5px 0 0 #ff6a5e; } body #wrap input.initial:checked ~ .toggle:not(.expand) { box-shadow: -5px 0 0 rgba(255, 255, 255, 0.15); } body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle) { -webkit-transform: rotate(0deg); transform: rotate(0deg); margin-left: 0px; } body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle) *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle) { -webkit-transform: rotate(0deg); transform: rotate(0deg); margin-left: 0px; } body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle) *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle):before, body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle) *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle):after { -webkit-transform: rotate(0deg); transform: rotate(0deg); } body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle).background:after { -webkit-transform: scaleY(1.25) translateX(30px); transform: scaleY(1.25) translateX(30px); } body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle).background:before { -webkit-transition: 0.5s cubic-bezier(0.75, 0.885, 0.32, 1); transition: 0.5s cubic-bezier(0.75, 0.885, 0.32, 1); } body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle).frame { -webkit-transform: scale(0.7) rotate(0deg) translateY(50px); transform: scale(0.7) rotate(0deg) translateY(50px); margin-left: -25px; } body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle):before, body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle):after { -webkit-transform: rotate(0deg); transform: rotate(0deg); } body #wrap * { -webkit-transition: margin-left 0.3s cubic-bezier(0.75, 0.885, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.75, 0.885, 0.32, 1); transition: margin-left 0.3s cubic-bezier(0.75, 0.885, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.75, 0.885, 0.32, 1); transition: transform 0.3s cubic-bezier(0.75, 0.885, 0.32, 1), margin-left 0.3s cubic-bezier(0.75, 0.885, 0.32, 1); transition: transform 0.3s cubic-bezier(0.75, 0.885, 0.32, 1), margin-left 0.3s cubic-bezier(0.75, 0.885, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.75, 0.885, 0.32, 1); } body #wrap *.frame { -webkit-transition: margin-left 0.4s cubic-bezier(0.75, 0.885, 0.32, 1), -webkit-transform 0.6s cubic-bezier(0.75, 0.885, 0.32, 1); transition: margin-left 0.4s cubic-bezier(0.75, 0.885, 0.32, 1), -webkit-transform 0.6s cubic-bezier(0.75, 0.885, 0.32, 1); transition: transform 0.6s cubic-bezier(0.75, 0.885, 0.32, 1), margin-left 0.4s cubic-bezier(0.75, 0.885, 0.32, 1); transition: transform 0.6s cubic-bezier(0.75, 0.885, 0.32, 1), margin-left 0.4s cubic-bezier(0.75, 0.885, 0.32, 1), -webkit-transform 0.6s cubic-bezier(0.75, 0.885, 0.32, 1); -webkit-transition-delay: 0.2s, 0.4s; transition-delay: 0.2s, 0.4s; } body #wrap *:before, body #wrap *:after { -webkit-transition: margin-left 0.3s cubic-bezier(0.75, 0.885, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.75, 0.885, 0.32, 1); transition: margin-left 0.3s cubic-bezier(0.75, 0.885, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.75, 0.885, 0.32, 1); transition: transform 0.3s cubic-bezier(0.75, 0.885, 0.32, 1), margin-left 0.3s cubic-bezier(0.75, 0.885, 0.32, 1); transition: transform 0.3s cubic-bezier(0.75, 0.885, 0.32, 1), margin-left 0.3s cubic-bezier(0.75, 0.885, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.75, 0.885, 0.32, 1); } body #wrap .background { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: #4e567d; overflow: hidden; } body #wrap .background:before { content: ""; position: absolute; width: 65%; height: 100%; left: 35%; top: 0; background: #fff; z-index: 2; -webkit-transition: cubic-bezier(0.75, 0.885, 0.32, 1) 0.5s ease-in-out; transition: cubic-bezier(0.75, 0.885, 0.32, 1) 0.5s ease-in-out; } body #wrap .background:after { content: "IF Mode"; position: absolute; z-index: 0; width: 100%; height: 80%; top: 10%; left: 50px; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; font-size: 200px; font-weight: 900; color: #444b6d; -webkit-transition: 1s ease-in-out; transition: 1s ease-in-out; -webkit-transform: scaleY(1.25); transform: scaleY(1.25); } body #wrap .frame { position: absolute; top: 60px; left: 85px; width: 427px; height: 365px; z-index: 2; -webkit-transform-origin: 190px 210px; transform-origin: 190px 210px; -webkit-transform: scale(0.8) rotate(-62.5deg); transform: scale(0.8) rotate(-62.5deg); } body #wrap .frame div { position: absolute; background-size: cover; width: 100%; height: 100%; top: 0; left: 0; } body #wrap .frame div.wheel.two.front, body #wrap .frame div.wheel.three.front, body #wrap .frame div.wheel.four.front { -webkit-transform: translateX(700px); transform: translateX(700px); margin-left: 0px; } body #wrap .frame div.wheel.two.back, body #wrap .frame div.wheel.three.back, body #wrap .frame div.wheel.four.back { -webkit-transform: translateX(-700px); transform: translateX(-700px); } body #wrap .frame div.wheel.front { -webkit-transform-origin: 273px 190px; transform-origin: 273px 190px; margin-left: -75px; -webkit-transform: rotate(115deg); transform: rotate(115deg); -webkit-transition-delay: 0.5s, 0.8s; transition-delay: 0.5s, 0.8s; z-index: 2; } body #wrap .frame div.wheel.back { z-index: -1; } body #wrap .frame div.wheel.back .inner { left: -40px; } body #wrap .frame div.wheel .inner { position: absolute; width: 210px; height: 210px; border-radius: 100%; z-index: -1; top: 170px; left: 300px; } body #wrap .frame div.wheel .inner:before { content: ""; position: absolute; width: 100%; height: 100%; background-image: url("https://assets.codepen.io/383755/wheel1.png"); background-size: contain; -webkit-transform: rotate(360deg); transform: rotate(360deg); -webkit-transition: background-image 0s ease-in-out, -webkit-transform 1.25s cubic-bezier(0.75, 0.885, 0.32, 1); transition: background-image 0s ease-in-out, -webkit-transform 1.25s cubic-bezier(0.75, 0.885, 0.32, 1); transition: transform 1.25s cubic-bezier(0.75, 0.885, 0.32, 1), background-image 0s ease-in-out; transition: transform 1.25s cubic-bezier(0.75, 0.885, 0.32, 1), background-image 0s ease-in-out, -webkit-transform 1.25s cubic-bezier(0.75, 0.885, 0.32, 1); -webkit-transition-delay: 0.1s, 0.5s; transition-delay: 0.1s, 0.5s; } body #wrap .frame div.rear { background-image: url("https://assets.codepen.io/383755/rear.png"); } body #wrap .frame div.stem { background-image: url("https://assets.codepen.io/383755/stem.png"); -webkit-transform-origin: 273px 190px; transform-origin: 273px 190px; margin-left: -105px; -webkit-transform: rotate(115deg); transform: rotate(115deg); -webkit-transition-delay: 0.5s, 0.8s; transition-delay: 0.5s, 0.8s; } body #wrap .frame div.shaft { background-image: url("https://assets.codepen.io/383755/shaft.png"); -webkit-transform-origin: 220px 200px; transform-origin: 220px 200px; -webkit-transform: translateX(-70px) translateY(40px); transform: translateX(-70px) translateY(40px); -webkit-transition-delay: 0.8s; transition-delay: 0.8s; } body #wrap .frame div.seat { background-image: url("https://assets.codepen.io/383755/seat.png"); -webkit-transform: translateY(100px) translateX(40px); transform: translateY(100px) translateX(40px); -webkit-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; -webkit-transition-delay: 0.65s; transition-delay: 0.65s; z-index: -1; }
CSS