css实现卡片轮换图文折叠展开动画效果代码
代码语言:html
所属分类:幻灯片
代码描述:css实现卡片轮换图文折叠展开动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; background: #e4e2e5; } body #wrap { width: 800px; height: 500px; box-shadow: 0 20px 30px -5px rgba(0, 0, 0, 0.15); overflow: hidden; position: relative; transform-style: preserve-3d; background: linear-gradient(to bottom, #fff 50%, #e4e2e5 50%); } body #wrap .trigger { position: absolute; width: 5%; height: 100%; bottom: 0; right: 0; z-index: 99; opacity: 1; cursor: pointer; } body #wrap .trigger:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #fff; box-shadow: -1px 0 0 0 rgba(0, 0, 0, 0.015); transition: 0.2s ease-in-out; } body #wrap .trigger:after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; border-width: 20px 0 20px 20px; border-color: transparent transparent transparent #222; top: calc(50% - 20px); right: 8.5px; transition: 0.2s ease-in-out; opacity: 0; } body #wrap .trigger:first-of-type:checked ~ .innerwrap .cards .cardwrap:first-of-type { opacity: 0; } body #wrap .trigger:nth-of-type(8):checked ~ .innerwrap .cards .cardwrap:last-of-type { opacity: 0; } body #wrap .trigger:nth-of-type(1):after { opacity: 1; } body #wrap .trigger:nth-of-type(1):hover:after { border-color: transparent transparent transparent #fff; } body #wrap .trigger:nth-of-type(1):hover:before { background: #222; } body #wrap .trigger:nth-of-type(1):checked { pointer-events: none; transform: translateX(100%); } body #wrap .trigger:nth-of-type(1):checked ~ .trigger { transform: translateX(0%); z-index: 98; } body #wrap .trigger:nth-of-type(1):checked ~ .innerwrap .cards { transform: rotate(0deg); } body #wrap .trigger:nth-of-type(1):checked ~ .innerwrap input:nth-of-type(1) { transform: rotate(45deg); } body #wrap .trigger:nth-of-type(1):checked ~ .innerwrap input:nth-of-type(2) { transform: rotate(90deg); } body #wrap .trigger:nth-of-type(1):checked ~ .innerwrap input:nth-of-type(3) { transform: rotate(135deg); } body #wrap .trigger:nth-of-type(1):checked ~ .innerwrap input:nth-of-type(4) { transform: rotate(180deg); } body #wrap .trigger:nth-of-type(1):checked ~ .innerwrap input:nth-of-type(5) { transform: rotate(225deg); } body #wrap .trigger:nth-of-type(1):checked ~ .innerwrap input:nth-of-type(6) { transform: rotate(270deg); } body #wrap .trigger:nth-of-type(1):checked ~ .innerwrap input:nth-of-type(7) { transform: rotate(315deg); } body #wrap .trigger:nth-of-type(1):checked ~ .innerwrap input:nth-of-type(8) { transform: rotate(360deg); } body #wrap .trigger:nth-of-type(1):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(1):checked ~ .innerwrap .cardwrap:nth-of-type(1) .card { transform: rotate(-45deg); } body #wrap .trigger:nth-of-type(1):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(1):checked ~ .innerwrap .cardwrap:nth-of-type(2) .card { transform: rotate(-90deg); } body #wrap .trigger:nth-of-type(1):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(1):checked ~ .innerwrap .cardwrap:nth-of-type(3) .card { transform: rotate(-135deg); } body #wrap .trigger:nth-of-type(1):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(1):checked ~ .innerwrap .cardwrap:nth-of-type(4) .card { transform: rotate(-180deg); } body #wrap .trigger:nth-of-type(1):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(1):checked ~ .innerwrap .cardwrap:nth-of-type(5) .card { transform: rotate(-225deg); } body #wrap .trigger:nth-of-type(1):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(1):checked ~ .innerwrap .cardwrap:nth-of-type(6) .card { transform: rotate(-270deg); } body #wrap .trigger:nth-of-type(1):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(1):checked ~ .innerwrap .cardwrap:nth-of-type(7) .card { transform: rotate(-315deg); } body #wrap .trigger:nth-of-type(1):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(1):checked ~ .innerwrap .cardwrap:nth-of-type(8) .card { transform: rotate(-360deg); } body #wrap .trigger:first-of-type:checked ~ .innerwrap .cards .cardwrap:first-of-type { opacity: 0; } body #wrap .trigger:nth-of-type(8):checked ~ .innerwrap .cards .cardwrap:last-of-type { opacity: 0; } body #wrap .trigger:nth-of-type(2):after { opacity: 1; } body #wrap .trigger:nth-of-type(2):hover:after { border-color: transparent transparent transparent #fff; } body #wrap .trigger:nth-of-type(2):hover:before { background: #222; } body #wrap .trigger:nth-of-type(2):checked { pointer-events: none; transform: translateX(200%); } body #wrap .trigger:nth-of-type(2):checked ~ .trigger { transform: translateX(0%); z-index: 97; } body #wrap .trigger:nth-of-type(2):checked ~ .innerwrap .cards { transform: rotate(45deg); } body #wrap .trigger:nth-of-type(2):checked ~ .innerwrap input:nth-of-type(1) { transform: rotate(90deg); } body #wrap .trigger:nth-of-type(2):checked ~ .innerwrap input:nth-of-type(2) { transform: rotate(135deg); } body #wrap .trigger:nth-of-type(2):checked ~ .innerwrap input:nth-of-type(3) { transform: rotate(180deg); } body #wrap .trigger:nth-of-type(2):checked ~ .innerwrap input:nth-of-type(4) { transform: rotate(225deg); } body #wrap .trigger:nth-of-type(2):checked ~ .innerwrap input:nth-of-type(5) { transform: rotate(270deg); } body #wrap .trigger:nth-of-type(2):checked ~ .innerwrap input:nth-of-type(6) { transform: rotate(315deg); } body #wrap .trigger:nth-of-type(2):checked ~ .innerwrap input:nth-of-type(7) { transform: rotate(360deg); } body #wrap .trigger:nth-of-type(2):checked ~ .innerwrap input:nth-of-type(8) { transform: rotate(405deg); } body #wrap .trigger:nth-of-type(2):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(2):checked ~ .innerwrap .cardwrap:nth-of-type(1) .card { transform: rotate(-90deg); } body #wrap .trigger:nth-of-type(2):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(2):checked ~ .innerwrap .cardwrap:nth-of-type(2) .card { transform: rotate(-135deg); } body #wrap .trigger:nth-of-type(2):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(2):checked ~ .innerwrap .cardwrap:nth-of-type(3) .card { transform: rotate(-180deg); } body #wrap .trigger:nth-of-type(2):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(2):checked ~ .innerwrap .cardwrap:nth-of-type(4) .card { transform: rotate(-225deg); } body #wrap .trigger:nth-of-type(2):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(2):checked ~ .innerwrap .cardwrap:nth-of-type(5) .card { transform: rotate(-270deg); } body #wrap .trigger:nth-of-type(2):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(2):checked ~ .innerwrap .cardwrap:nth-of-type(6) .card { transform: rotate(-315deg); } body #wrap .trigger:nth-of-type(2):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(2):checked ~ .innerwrap .cardwrap:nth-of-type(7) .card { transform: rotate(-360deg); } body #wrap .trigger:nth-of-type(2):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(2):checked ~ .innerwrap .cardwrap:nth-of-type(8) .card { transform: rotate(-405deg); } body #wrap .trigger:first-of-type:checked ~ .innerwrap .cards .cardwrap:first-of-type { opacity: 0; } body #wrap .trigger:nth-of-type(8):checked ~ .innerwrap .cards .cardwrap:last-of-type { opacity: 0; } body #wrap .trigger:nth-of-type(3):after { opacity: 1; } body #wrap .trigger:nth-of-type(3):hover:after { border-color: transparent transparent transparent #fff; } body #wrap .trigger:nth-of-type(3):hover:before { background: #222; } body #wrap .trigger:nth-of-type(3):checked { pointer-events: none; transform: translateX(300%); } body #wrap .trigger:nth-of-type(3):checked ~ .trigger { transform: translateX(0%); z-index: 96; } body #wrap .trigger:nth-of-type(3):checked ~ .innerwrap .cards { transform: rotate(90deg); } body #wrap .trigger:nth-of-type(3):checked ~ .innerwrap input:nth-of-type(1) { transform: rotate(135deg); } body #wrap .trigger:nth-of-type(3):checked ~ .innerwrap input:nth-of-type(2) { transform: rotate(180deg); } body #wrap .trigger:nth-of-type(3):checked ~ .innerwrap input:nth-of-type(3) { transform: rotate(225deg); } body #wrap .trigger:nth-of-type(3):checked ~ .innerwrap input:nth-of-type(4) { transform: rotate(270deg); } body #wrap .trigger:nth-of-type(3):checked ~ .innerwrap input:nth-of-type(5) { transform: rotate(315deg); } body #wrap .trigger:nth-of-type(3):checked ~ .innerwrap input:nth-of-type(6) { transform: rotate(360deg); } body #wrap .trigger:nth-of-type(3):checked ~ .innerwrap input:nth-of-type(7) { transform: rotate(405deg); } body #wrap .trigger:nth-of-type(3):checked ~ .innerwrap input:nth-of-type(8) { transform: rotate(450deg); } body #wrap .trigger:nth-of-type(3):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(3):checked ~ .innerwrap .cardwrap:nth-of-type(1) .card { transform: rotate(-135deg); } body #wrap .trigger:nth-of-type(3):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(3):checked ~ .innerwrap .cardwrap:nth-of-type(2) .card { transform: rotate(-180deg); } body #wrap .trigger:nth-of-type(3):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(3):checked ~ .innerwrap .cardwrap:nth-of-type(3) .card { transform: rotate(-225deg); } body #wrap .trigger:nth-of-type(3):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(3):checked ~ .innerwrap .cardwrap:nth-of-type(4) .card { transform: rotate(-270deg); } body #wrap .trigger:nth-of-type(3):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(3):checked ~ .innerwrap .cardwrap:nth-of-type(5) .card { transform: rotate(-315deg); } body #wrap .trigger:nth-of-type(3):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(3):checked ~ .innerwrap .cardwrap:nth-of-type(6) .card { transform: rotate(-360deg); } body #wrap .trigger:nth-of-type(3):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(3):checked ~ .innerwrap .cardwrap:nth-of-type(7) .card { transform: rotate(-405deg); } body #wrap .trigger:nth-of-type(3):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(3):checked ~ .innerwrap .cardwrap:nth-of-type(8) .card { transform: rotate(-450deg); } body #wrap .trigger:first-of-type:checked ~ .innerwrap .cards .cardwrap:first-of-type { opacity: 0; } body #wrap .trigger:nth-of-type(8):checked ~ .innerwrap .cards .cardwrap:last-of-type { opacity: 0; } body #wrap .trigger:nth-of-type(4):after { opacity: 1; } body #wrap .trigger:nth-of-type(4):hover:after { border-color: transparent transparent transparent #fff; } body #wrap .trigger:nth-of-type(4):hover:before { background: #222; } body #wrap .trigger:nth-of-type(4):checked { pointer-events: none; transform: translateX(400%); } body #wrap .trigger:nth-of-type(4):checked ~ .trigger { transform: translateX(0%); z-index: 95; } body #wrap .trigger:nth-of-type(4):checked ~ .innerwrap .cards { transform: rotate(135deg); } body #wrap .trigger:nth-of-type(4):checked ~ .innerwrap input:nth-of-type(1) { transform: rotate(180deg); } body #wrap .trigger:nth-of-type(4):checked ~ .innerwrap input:nth-of-type(2) { transform: rotate(225deg); } body #wrap .trigger:nth-of-type(4):checked ~ .innerwrap input:nth-of-type(3) { transform: rotate(270deg); } body #wrap .trigger:nth-of-type(4):checked ~ .innerwrap input:nth-of-type(4) { transform: rotate(315deg); } body #wrap .trigger:nth-of-type(4):checked ~ .innerwrap input:nth-of-type(5) { transform: rotate(360deg); } body #wrap .trigger:nth-of-type(4):checked ~ .innerwrap input:nth-of-type(6) { transform: rotate(405deg); } body #wrap .trigger:nth-of-type(4):checked ~ .innerwrap input:nth-of-type(7) { transform: rotate(450deg); } body #wrap .trigger:nth-of-type(4):checked ~ .innerwrap input:nth-of-type(8) { transform: rotate(495deg); } body #wrap .trigger:nth-of-type(4):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(4):checked ~ .innerwrap .cardwrap:nth-of-type(1) .card { transform: rotate(-180deg); } body #wrap .trigger:nth-of-type(4):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(4):checked ~ .innerwrap .cardwrap:nth-of-type(2) .card { transform: rotate(-225deg); } body #wrap .trigger:nth-of-type(4):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(4):checked ~ .innerwrap .cardwrap:nth-of-type(3) .card { transform: rotate(-270deg); } body #wrap .trigger:nth-of-type(4):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(4):checked ~ .innerwrap .cardwrap:nth-of-type(4) .card { transform: rotate(-315deg); } body #wrap .trigger:nth-of-type(4):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(4):checked ~ .innerwrap .cardwrap:nth-of-type(5) .card { transform: rotate(-360deg); } body #wrap .trigger:nth-of-type(4):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(4):checked ~ .innerwrap .cardwrap:nth-of-type(6) .card { transform: rotate(-405deg); } body #wrap .trigger:nth-of-type(4):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(4):checked ~ .innerwrap .cardwrap:nth-of-type(7) .card { transform: rotate(-450deg); } body #wrap .trigger:nth-of-type(4):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(4):checked ~ .innerwrap .cardwrap:nth-of-type(8) .card { transform: rotate(-495deg); } body #wrap .trigger:first-of-type:checked ~ .innerwrap .cards .cardwrap:first-of-type { opacity: 0; } body #wrap .trigger:nth-of-type(8):checked ~ .innerwrap .cards .cardwrap:last-of-type { opacity: 0; } body #wrap .trigger:nth-of-type(5):after { opacity: 1; } body #wrap .trigger:nth-of-type(5):hover:after { border-color: transparent transparent transparent #fff; } body #wrap .trigger:nth-of-type(5):hover:before { background: #222; } body #wrap .trigger:nth-of-type(5):checked { pointer-events: none; transform: translateX(500%); } body #wrap .trigger:nth-of-type(5):checked ~ .trigger { transform: translateX(0%); z-index: 94; } body #wrap .trigger:nth-of-type(5):checked ~ .innerwrap .cards { transform: rotate(180deg); } body #wrap .trigger:nth-of-type(5):checked ~ .innerwrap input:nth-of-type(1) { transform: rotate(225deg); } body #wrap .trigger:nth-of-type(5):checked ~ .innerwrap input:nth-of-type(2) { transform: rotate(270deg); } body #wrap .trigger:nth-of-type(5):checked ~ .innerwrap input:nth-of-type(3) { transform: rotate(315deg); } body #wrap .trigger:nth-of-type(5):checked ~ .innerwrap input:nth-of-type(4) { transform: rotate(360deg); } body #wrap .trigger:nth-of-type(5):checked ~ .innerwrap input:nth-of-type(5) { transform: rotate(405deg); } body #wrap .trigger:nth-of-type(5):checked ~ .innerwrap input:nth-of-type(6) { transform: rotate(450deg); } body #wrap .trigger:nth-of-type(5):checked ~ .innerwrap input:nth-of-type(7) { transform: rotate(495deg); } body #wrap .trigger:nth-of-type(5):checked ~ .innerwrap input:nth-of-type(8) { transform: rotate(540deg); } body #wrap .trigger:nth-of-type(5):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(5):checked ~ .innerwrap .cardwrap:nth-of-type(1) .card { transform: rotate(-225deg); } body #wrap .trigger:nth-of-type(5):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(5):checked ~ .innerwrap .cardwrap:nth-of-type(2) .card { transform: rotate(-270deg); } body #wrap .trigger:nth-of-type(5):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(5):checked ~ .innerwrap .cardwrap:nth-of-type(3) .card { transform: rotate(-315deg); } body #wrap .trigger:nth-of-type(5):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(5):checked ~ .innerwrap .cardwrap:nth-of-type(4) .card { transform: rotate(-360deg); } body #wrap .trigger:nth-of-type(5):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(5):checked ~ .innerwrap .cardwrap:nth-of-type(5) .card { transform: rotate(-405deg); } body #wrap .trigger:nth-of-type(5):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(5):checked ~ .innerwrap .cardwrap:nth-of-type(6) .card { transform: rotate(-450deg); } body #wrap .trigger:nth-of-type(5):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(5):checked ~ .innerwrap .cardwrap:nth-of-type(7) .card { transform: rotate(-495deg); } body #wrap .trigger:nth-of-type(5):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(5):checked ~ .innerwrap .cardwrap:nth-of-type(8) .card { transform: rotate(-540deg); } body #wrap .trigger:first-of-type:checked ~ .innerwrap .cards .cardwrap:first-of-type { opacity: 0; } body #wrap .trigger:nth-of-type(8):checked ~ .innerwrap .cards .cardwrap:last-of-type { opacity: 0; } body #wrap .trigger:nth-of-type(6):after { opacity: 1; } body #wrap .trigger:nth-of-type(6):hover:after { border-color: transparent transparent transparent #fff; } body #wrap .trigger:nth-of-type(6):hover:before { background: #222; } body #wrap .trigger:nth-of-type(6):checked { pointer-events: none; transform: translateX(600%); } body #wrap .trigger:nth-of-type(6):checked ~ .trigger { transform: translateX(0%); z-index: 93; } body #wrap .trigger:nth-of-type(6):checked ~ .innerwrap .cards { transform: rotate(225deg); } body #wrap .trigger:nth-of-type(6):checked ~ .innerwrap input:nth-of-type(1) { transform: rotate(270deg); } body #wrap .trigger:nth-of-type(6):checked ~ .innerwrap input:nth-of-type(2) { transform: rotate(315deg); } body #wrap .trigger:nth-of-type(6):checked ~ .innerwrap input:nth-of-type(3) { transform: rotate(360deg); } body #wrap .trigger:nth-of-type(6):checked ~ .innerwrap input:nth-of-type(4) { transform: rotate(405deg); } body #wrap .trigger:nth-of-type(6):checked ~ .innerwrap input:nth-of-type(5) { transform: rotate(450deg); } body #wrap .trigger:nth-of-type(6):checked ~ .innerwrap input:nth-of-type(6) { transform: rotate(495deg); } body #wrap .trigger:nth-of-type(6):checked ~ .innerwrap input:nth-of-type(7) { transform: rotate(540deg); } body #wrap .trigger:nth-of-type(6):checked ~ .innerwrap input:nth-of-type(8) { transform: rotate(585deg); } body #wrap .trigger:nth-of-type(6):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(6):checked ~ .innerwrap .cardwrap:nth-of-type(1) .card { transform: rotate(-270deg); } body #wrap .trigger:nth-of-type(6):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(6):checked ~ .innerwrap .cardwrap:nth-of-type(2) .card { transform: rotate(-315deg); } body #wrap .trigger:nth-of-type(6):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(6):checked ~ .innerwrap .cardwrap:nth-of-type(3) .card { transform: rotate(-360deg); } body #wrap .trigger:nth-of-type(6):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(6):checked ~ .innerwrap .cardwrap:nth-of-type(4) .card { transform: rotate(-405deg); } body #wrap .trigger:nth-of-type(6):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(6):checked ~ .innerwrap .cardwrap:nth-of-type(5) .card { transform: rotate(-450deg); } body #wrap .trigger:nth-of-type(6):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(6):checked ~ .innerwrap .cardwrap:nth-of-type(6) .card { transform: rotate(-495deg); } body #wrap .trigger:nth-of-type(6):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(6):checked ~ .innerwrap .cardwrap:nth-of-type(7) .card { transform: rotate(-540deg); } body #wrap .trigger:nth-of-type(6):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(6):checked ~ .innerwrap .cardwrap:nth-of-type(8) .card { transform: rotate(-585deg); } body #wrap .trigger:first-of-type:checked ~ .innerwrap .cards .cardwrap:first-of-type { opacity: 0; } body #wrap .trigger:nth-of-type(8):checked ~ .innerwrap .cards .cardwrap:last-of-type { opacity: 0; } body #wrap .trigger:nth-of-type(7):after { opacity: 1; } body #wrap .trigger:nth-of-type(7):hover:after { border-color: transparent transparent transparent #fff; } body #wrap .trigger:nth-of-type(7):hover:before { background: #222; } body #wrap .trigger:nth-of-type(7):checked { pointer-events: none; transform: translateX(700%); } body #wrap .trigger:nth-of-type(7):checked ~ .trigger { transform: translateX(0%); z-index: 92; } body #wrap .trigger:nth-of-type(7):checked ~ .innerwrap .cards { transform: rotate(270deg); } body #wrap .trigger:nth-of-type(7):checked ~ .innerwrap input:nth-of-type(1) { transform: rotate(315deg); } body #wrap .trigger:nth-of-type(7):checked ~ .innerwrap input:nth-of-type(2) { transform: rotate(360deg); } body #wrap .trigger:nth-of-type(7):checked ~ .innerwrap input:nth-of-type(3) { transform: rotate(405deg); } body #wrap .trigger:nth-of-type(7):checked ~ .innerwrap input:nth-of-type(4) { transform: rotate(450deg); } body #wrap .trigger:nth-of-type(7):checked ~ .innerwrap input:nth-of-type(5) { transform: rotate(495deg); } body #wrap .trigger:nth-of-type(7):checked ~ .innerwrap input:nth-of-type(6) { transform: rotate(540deg); } body #wrap .trigger:nth-of-type(7):checked ~ .innerwrap input:nth-of-type(7) { transform: rotate(585deg); } body #wrap .trigger:nth-of-type(7):checked ~ .innerwrap input:nth-of-type(8) { transform: rotate(630deg); } body #wrap .trigger:nth-of-type(7):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(7):checked ~ .innerwrap .cardwrap:nth-of-type(1) .card { transform: rotate(-315deg); } body #wrap .trigger:nth-of-type(7):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(7):checked ~ .innerwrap .cardwrap:nth-of-type(2) .card { transform: rotate(-360deg); } body #wrap .trigger:nth-of-type(7):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(7):checked ~ .innerwrap .cardwrap:nth-of-type(3) .card { transform: rotate(-405deg); } body #wrap .trigger:nth-of-type(7):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(7):checked ~ .innerwrap .cardwrap:nth-of-type(4) .card { transform: rotate(-450deg); } body #wrap .trigger:nth-of-type(7):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(7):checked ~ .innerwrap .cardwrap:nth-of-type(5) .card { transform: rotate(-495deg); } body #wrap .trigger:nth-of-type(7):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(7):checked ~ .innerwrap .cardwrap:nth-of-type(6) .card { transform: rotate(-540deg); } body #wrap .trigger:nth-of-type(7):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(7):checked ~ .innerwrap .cardwrap:nth-of-type(7) .card { transform: rotate(-585deg); } body #wrap .trigger:nth-of-type(7):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(7):checked ~ .innerwrap .cardwrap:nth-of-type(8) .card { transform: rotate(-630deg); } body #wrap .trigger:first-of-type:checked ~ .innerwrap .cards .cardwrap:first-of-type { opacity: 0; } body #wrap .trigger:nth-of-type(8):checked ~ .innerwrap .cards .cardwrap:last-of-type { opacity: 0; } body #wrap .trigger:nth-of-type(8):after { opacity: 1; } body #wrap .trigger:nth-of-type(8):hover:after { border-color: transparent transparent transparent #fff; } body #wrap .trigger:nth-of-type(8):hover:before { background: #222; } body #wrap .trigger:nth-of-type(8):checked { pointer-events: none; transform: translateX(800%); } body #wrap .trigger:nth-of-type(8):checked ~ .trigger { transform: translateX(0%); z-index: 91; } body #wrap .trigger:nth-of-type(8):checked ~ .innerwrap .cards { transform: rotate(315deg); } body #wrap .trigger:nth-of-type(8):checked ~ .innerwrap input:nth-of-type(1) { transform: rotate(360deg); } body #wrap .trigger:nth-of-type(8):checked ~ .innerwrap input:nth-of-type(2) { transform: rotate(405deg); } body #wrap .trigger:nth-of-type(8):checked ~ .innerwrap input:nth-of-type(3) { transform: rotate(450deg); } body #wrap .trigger:nth-of-type(8):checked ~ .innerwrap input:nth-of-type(4) { transform: rotate(495deg); } body #wrap .trigger:nth-of-type(8):checked ~ .innerwrap input:nth-of-type(5) { transform: rotate(540deg); } body #wrap .trigger:nth-of-type(8):checked ~ .innerwrap input:nth-of-type(6) { transform: rotate(585deg); } body #wrap .trigger:nth-of-type(8):checked ~ .innerwrap input:nth-of-type(7) { transform: rotate(630deg); } body #wrap .trigger:nth-of-type(8):checked ~ .innerwrap input:nth-of-type(8) { transform: rotate(675deg); } body #wrap .trigger:nth-of-type(8):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(8):checked ~ .innerwrap .cardwrap:nth-of-type(1) .card { transform: rotate(-360deg); } body #wrap .trigger:nth-of-type(8):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(8):checked ~ .innerwrap .cardwrap:nth-of-type(2) .card { transform: rotate(-405deg); } body #wrap .trigger:nth-of-type(8):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(8):checked ~ .innerwrap .cardwrap:nth-of-type(3) .card { transform: rotate(-450deg); } body #wrap .trigger:nth-of-type(8):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(8):checked ~ .innerwrap .cardwrap:nth-of-type(4) .card { transform: rotate(-495deg); } body #wrap .trigger:nth-of-type(8):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(8):checked ~ .innerwrap .cardwrap:nth-of-type(5) .card { transform: rotate(-540deg); } body #wrap .trigger:nth-of-type(8):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(8):checked ~ .innerwrap .cardwrap:nth-of-type(6) .card { transform: rotate(-585deg); } body #wrap .trigger:nth-of-type(8):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(8):checked ~ .innerwrap .cardwrap:nth-of-type(7) .card { transform: rotate(-630deg); } body #wrap .trigger:nth-of-type(8):checked ~ .innerwrap .cardwrap:last-of-type { opacity: 1; } body #wrap .trigger:nth-of-type(8):checked ~ .innerwrap .cardwrap:nth-of-type(8) .card { transform: rotate(-675deg); } body #wrap .innerwrap { position: absolute; width: 1300px; height: 1300px; left: -725px; top: -400px; z-index: 999; } body #wrap .innerwrap input { position: absolute; top: calc(50% - 175px); height: 350px; width: 280px; left: 900px; transform-style: preserve-3d; transform-origin: -350px; perspective: 600px; z-index: 7; opacity: 0; cursor: pointer; } body #wrap .innerwrap input:before { content: ""; position: absolute; width: 100%; height: 100%; left: 0%; top: 0%; z-index: 9; pointer-events: none; } body #wrap .innerwrap input:nth-of-type(1) { transform: rotate(0deg); transition: 0.7s cubic-bezier(1, 0, 0, 1); } body #wrap .innerwrap input:nth-of-type(1):checked:before { width: 500%; left: -125%; height: 500%; top: -125%; pointer-events: auto; } body #wrap .innerwrap input:nth-of-type(1):checked:hover ~ .cards .cardwrap:nth-of-type(1) .inner .text:before { -webkit-animation: turn 0.25s ease-in-out infinite alternate; animation: turn 0.25s ease-in-out infinite alternate; } @-webkit-keyframes turn { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } } @keyframes turn { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } } body #wrap .innerwrap input:nth-of-type(1):checked ~ .cards .cardwrap { z-index: -1; } body #wrap .innerwrap input:nth-of-type(1):checked ~ .cards .cardwrap .card .inner { transform: rotateX(0deg) translateZ(-100px) scale(0.95) translateY(-30px) translateX(-50px); } body #wrap .innerwrap input:nth-of-type(1):checked ~ .cards .cardwrap .card .inner .text p, body #wrap .innerwrap input:nth-of-type(1):checked ~ .cards .cardwrap .card .inner .link p { transform: translateY(0px) skewY(0deg); transition-delay: 0.8s; } body #wrap .innerwrap input:nth-of-type(1):checked ~ .cards .cardwrap .card .inner .link p { transition-delay: 1s; } body #wrap .innerwrap input:nth-of-type(1):checked ~ .cards .cardwrap:nth-of-type(1) { z-index: 2; } body #wrap .innerwrap input:nth-of-type(1):checked ~ .cards .cardwrap:nth-of-type(1) .card .inner { transform: rotateX(0deg) translateZ(150px) translateY(-20px) translateX(-70px); box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.25); } body #wrap .innerwrap input:nth-of-type(1):checked ~ .cards .cardwrap:nth-of-type(1) .card .inner .text, body #wrap .innerwrap input:nth-of-type(1):checked ~ .cards .cardwrap:nth-of-type(1) .card .inner .link { transition: opacity 0s ease-in-out, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease-in-out; transition-delay: 0.3s, 0.6s, 0s; transform: translateX(150%) rotateX(0deg); box-shadow: inherit; opacity: 1; } body #wrap .innerwrap input:nth-of-type(1):checked ~ .cards .cardwrap:nth-of-type(1) .card .inner .link { transition-delay: 0.3s, 0.75s, 0s; } body #wrap .innerwrap input:nth-of-type(1):checked ~ .cards .cardwrap:nth-of-type(1) .card .inner .link p:before { transition-delay: 0.95s; } body #wrap .innerwrap input:nth-of-type(1):checked ~ .cards .cardwrap:nth-of-type(1) .card .inner:after { transform: skewX(0deg) translateZ(-1px) scale(1); } body #wrap .innerwrap input:nth-of-type(1):checked ~ .cards .cardwrap:nth-of-type(1) .card .inner:before { transform: translateZ(20px); } body #wrap .innerwrap input:nth-of-type(2) { transform: rotate(45deg); transition: 0.7s cubic-bezier(1, 0, 0, 1); } body #wrap .innerwrap input:nth-of-type(2):checked:before { width: 500%; left: -125%; height: 500%; top: -125%; pointer-events: auto; } body #wrap .innerwrap input:nth-of-type(2):checked:hover ~ .cards .cardwrap:nth-of-type(2) .inner .text:before { -webkit-animation: turn 0.25s ease-in-out infinite alternate; animation: turn 0.25s ease-in-out infinite alternate; } @keyframes turn { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } } body #wrap .innerwrap input:nth-of-type(2):checked ~ .cards .cardwrap { z-index: -1; } body #wrap .innerwrap input:nth-of-type(2):checked ~ .cards .cardwrap .card .inner { transform: rotateX(0deg) translateZ(-100px) scale(0.95) translateY(-30px) translateX(-50px); } body #wrap .innerwrap input:nth-of-type(2):checked ~ .cards .cardwrap .card .inner .text p, body #wrap .innerwrap input:nth-of-type(2):checked ~ .cards .cardwrap .card .inner .link p { transform: translateY(0px) skewY(0deg); transition-delay: 0.8s; } body #wrap .innerwrap input:nth-of-type(2):checked ~ .cards .cardwrap .card .inner .link p { transition-delay: 1s; } body #wrap .innerwrap input:nth-of-type(2):checked ~ .cards .cardwrap:nth-of-type(2) { z-index: 2; } body #wrap .innerwrap input:nth-of-type(2):checked ~ .cards .cardwrap:nth-of-type(2) .card .inner { transform: rotateX(0deg) translateZ(150px) translateY(-20px) translateX(-70px); box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.25); } body #wrap .innerwrap input:nth-of-type(2):checked ~ .cards .cardwrap:nth-of-type(2) .card .inner .text, body #wrap .innerwrap input:nth-of-type(2):checked ~ .cards .cardwrap:nth-of-type(2) .card .inner .link { transition: opacity 0s ease-in-out, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease-in-out; transition-delay: 0.3s, 0.6s, 0s; transform: translateX(150%) rotateX(0deg); box-shadow: inherit; opacity: 1; } body #wrap .innerwrap input:nth-of-type(2):checked ~ .cards .cardwrap:nth-of-type(2) .card .inner .link { transition-delay: 0.3s, 0.75s, 0s; } body #wrap .innerwrap input:nth-of-type(2):checked ~ .cards .cardwrap:nth-of-type(2) .card .inner .link p:before { transition-delay: 0.95s; } body #wrap .innerwrap input:nth-of-type(2):checked ~ .cards .cardwrap:nth-of-type(2) .card .inner:after { transform: skewX(0deg) translateZ(-1px) scale(1); } body #wrap .innerwrap input:nth-of-type(2):checked ~ .cards .cardwrap:nth-of-type(2) .card .inner:before { transform: translateZ(20px); } body #wrap .innerwrap input:nth-of-type(3) { transform: rotate(90deg); transition: 0.7s cubic-bezier(1, 0, 0, 1); } body #wrap .innerwrap input:nth-of-type(3):checked:before { width: 500%; left: -125%; height: 500%; top: -125%; pointer-events: auto; } body #wrap .innerwrap input:nth-of-type(3):checked:hover ~ .cards .cardwrap:nth-of-type(3) .inner .text:before { -webkit-animation: turn 0.25s ease-in-out infinite alternate; animation: turn 0.25s ease-in-out infinite alternate; } @keyframes turn { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } } body #wrap .innerwrap input:nth-of-type(3):checked ~ .cards .cardwrap { z-index: -1; } body #wrap .innerwrap input:nth-of-type(3):checked ~ .cards .cardwrap .card .inner { transform: rotateX(0deg) translateZ(-100px) scale(0.95) translateY(-30px) translateX(-50px); } body #wrap .innerwrap input:nth-of-type(3):checked ~ .cards .cardwrap .card .inner .text p, body #wrap .innerwrap input:nth-of-type(3):checked ~ .cards .cardwrap .card .inner .link p { transform: translateY(0px) skewY(0deg); transition-delay: 0.8s; } body #wrap .innerwrap input:nth-of-type(3):checked ~ .cards .cardwrap .card .inner .link p { transition-delay: 1s; } body #wrap .innerwrap input:nth-of-type(3):checked ~ .cards .cardwrap:nth-of-type(3) { z-index: 2; } body #wrap .innerwrap input:nth-of-type(3):checked ~ .cards .cardwrap:nth-of-type(3) .card .inner { transform: rotateX(0deg) translateZ(150px) translateY(-20px) translateX(-70px); box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.25); } body #wrap .innerwrap input:nth-of-type(3):checked ~ .cards .cardwrap:nth-of-type(3) .card .inner .text, body #wrap .innerwrap input:nth-of-type(3):checked ~ .cards .cardwrap:nth-of-type(3) .card .inner .link { transition: opacity 0s ease-in-out, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease-in-out; transition-delay: 0.3s, 0.6s, 0s; transform: translateX(150%) rotateX(0deg); box-shadow: inherit; opacity: 1; } body #wrap .innerwrap input:nth-of-type(3):checked ~ .cards .cardwrap:nth-of-type(3) .card .inner .link { transition-delay: 0.3s, 0.75s, 0s; } body #wrap .innerwrap input:nth-of-type(3):checked ~ .cards .cardwrap:nth-of-type(3) .card .inner .link p:before { transition-delay: 0.95s; } body #wrap .innerwrap input:nth-of-type(3):checked ~ .cards .cardwrap:nth-of-type(3) .card .inner:after { transform: skewX(0deg) translateZ(-1px) scale(1); } body #wrap .innerwrap input:nth-of-type(3):checked ~ .cards .cardwrap:nth-of-type(3) .card .inner:before { transform: translateZ(20px); } body #wrap .innerwrap input:nth-of-type(4) { transform: rotate(135deg); transition: 0.7s cubic-bezier(1, 0, 0, 1); } body #wrap .innerwrap input:nth-of-type(4):checked:before { width: 500%; left: -125%; height: 500%; top: -125%; pointer-events: auto; } body #wrap .innerwrap input:nth-of-type(4):checked:hover ~ .cards .cardwrap:nth-of-type(4) .inner .text:before { -webkit-animation: turn 0.25s ease-in-out infinite alternate; animation: turn 0.25s ease-in-out infinite alternate; } @keyframes turn { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } } body #wrap .innerwrap input:nth-of-type(4):checked ~ .cards .cardwrap { z-index: -1; } body #wrap .innerwrap input:nth-of-type(4):checked ~ .cards .cardwrap .card .inner { transform: rotateX(0deg) translateZ(-100px) scale(0.95) translateY(-30px) translateX(-50px); } body #wrap .innerwrap input:nth-of-type(4):checked ~ .cards .cardwrap .card .inner .text p, body #wrap .innerwrap input:nth-of-type(4):checked ~ .cards .cardwrap .card .inner .link p { transform: translateY(0px) skewY(0deg); transition-delay: 0.8s; } body #wrap .innerwrap input:nth-of-type(4):checked ~ .cards .cardwrap .card .inner .link p { transition-delay: 1s; } body #wrap .innerwrap input:nth-of-type(4):checked ~ .cards .cardwrap:nth-of-type(4) { z-index: 2; } body #wrap .innerwrap input:nth-of-type(4):checked ~ .cards .cardwrap:nth-of-type(4) .card .inner { transform: rotateX(0deg) translateZ(150px) translateY(-20px) translateX(-70px); box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.25); } body #wrap .innerwrap input:nth-of-type(4):checked ~ .cards .cardwrap:nth-of-type(4) .card .inner .text, body #wrap .innerwrap input:nth-of-type(4):checked ~ .cards .cardwrap:nth-of-type(4) .card .inner .link { transition: opacity 0s ease-in-out, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease-in-out; transition-delay: 0.3s, 0.6s, 0s; transform: translateX(150%) rotateX(0deg); box-shadow: inherit; opacity: 1; } body #wrap .innerwrap input:nth-of-type(4):checked ~ .cards .cardwrap:nth-of-type(4) .card .inner .link { transition-delay: 0.3s, 0.75s, 0s; } body #wrap .innerwrap input:nth-of-type(4):checked ~ .cards .cardwrap:nth-of-type(4) .card .inner .link p:before { transition-delay: 0.95s; } body #wrap .innerwrap input:nth-of-type(4):checked ~ .cards .cardwrap:nth-of-type(4) .card .inner:after { transform: skewX(0deg) translateZ(-1px) scale(1); } body #wrap .innerwrap input:nth-of-type(4):checked ~ .cards .cardwrap:nth-of-type(4) .card .inner:before { transform: translateZ(20px); } body #wrap .innerwrap input:nth-of-type(5) { transform: rotate(180deg); transition: 0.7s cubic-bezier(1, 0, 0, 1); } body #wrap .innerwrap input:nth-of-type(5):checked:before { width: 500%; left: -125%; height: 500%; top: -125%; pointer-events: auto; } body #wrap .innerwrap input:nth-of-type(5):checked:hover ~ .cards .cardwrap:nth-of-type(5) .inner .text:before { -webkit-animation: turn 0.25s ease-in-out infinite alternate; animation: turn 0.25s ease-in-out infinite alternate; } @keyframes turn { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } } body #wrap .innerwrap input:nth-of-type(5):checked ~ .cards .cardwrap { z-index: -1; } body #wrap .innerwrap input:nth-of-type(5):checked ~ .cards .cardwrap .card .inner { transform: rotateX(0deg) translateZ(-100px) scale(0.95) translateY(-30px) translateX(-50px); } body #wrap .innerwrap input:nth-of-type(5):checked ~ .cards .cardwrap .card .inner .text p, body #wrap .innerwrap input:nth-of-type(5):checked ~ .cards .cardwrap .card .inner .link p { transform: translateY(0px) skewY(0deg); transition-delay: 0.8s; } body #wrap .innerwrap input:nth-of-type(5):checked ~ .cards .cardwrap .card .inner .link p { transition-delay: 1s; } body #wrap .innerwrap input:nth-of-type(5):checked ~ .cards .cardwrap:nth-of-type(5) { z-index: 2; } body #wrap .innerwrap input:nth-of-type(5):checked ~ .cards .cardwrap:nth-of-type(5) .card .inner { transform: rotateX(0deg) translateZ(150px) translateY(-20px) translateX(-70px); box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.25); } body #wrap .innerwrap input:nth-of-type(5):checked ~ .cards .cardwrap:nth-of-type(5) .card .inner .text, body #wrap .innerwrap input:nth-of-type(5):checked ~ .cards .cardwrap:nth-of-type(5) .card .inner .link { transition: opacity 0s ease-in-out, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease-in-out; transition-delay: 0.3s, 0.6s, 0s; transform: translateX(150%) rotateX(0deg); box-shadow: inherit; opacity: 1; } body #wrap .innerwrap input:nth-of-type(5):checked ~ .cards .cardwrap:nth-of-type(5) .card .inner .link { transition-delay: 0.3s, 0.75s, 0s; } body #wrap .innerwrap input:nth-of-type(5):checked ~ .cards .cardwrap:nth-of-type(5) .card .inner .link p:before { transition-delay: 0.95s; } body #wrap .innerwrap input:nth-of-type(5):checked ~ .cards .cardwrap:nth-of-type(5) .card .inner:after { transform: skewX(0deg) translateZ(-1px) scale(1); } body #wrap .innerwrap input:nth-of-type(5):checked ~ .cards .cardwrap:nth-of-type(5) .card .inner:before { transform: translateZ(20px); } body #wrap .innerwrap input:nth-of-type(6) { transform: rotate(225deg); transition: 0.7s cubic-bezier(1, 0, 0, 1); } body #wrap .innerwrap input:nth-of-type(6):checked:before { width: 500%; left: -125%; height: 500%; top: -125%; pointer-events: auto; } body #wrap .innerwrap input:nth-of-type(6):checked:hover ~ .cards .cardwrap:nth-of-type(6) .inner .text:before { -webkit-animation: turn 0.25s ease-in-out infinite alternate; animation: turn 0.25s ease-in-out infinite alternate; } @keyframes turn { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } } body #wrap .innerwrap input:nth-of-type(6):checked ~ .cards .cardwrap { z-index: -1; } body #wrap .innerwrap input:nth-of-type(6):checked ~ .cards .cardwrap .card .inner { transform: rotateX(0deg) translateZ(-100px) scale(0.95) translateY(-30px) translateX(-50px); } body #wrap .innerwrap input:nth-of-type(6):checked ~ .cards .cardwrap .card .inner .text p, body #wrap .innerwrap input:nth-of-type(6):checked ~ .cards .cardwrap .card .inner .link p { transform: translateY(0px) skewY(0deg); transition-delay: 0.8s; } body #wrap .innerwrap input:nth-of-type(6):checked ~ .cards .cardwrap .card .inner .link p { transition-delay: 1s; } body #wrap .innerwrap input:nth-of-type(6):checked ~ .cards .cardwrap:nth-of-type(6) { z-index: 2; } body #wrap .innerwrap input:nth-of-type(6):checked ~ .cards .cardwrap:nth-of-type(6) .card .inner { transform: rotateX(0deg) translateZ(150px) translateY(-20px) translateX(-70px); box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.25); } body #wrap .innerwrap input:nth-of-type(6):checked ~ .cards .cardwrap:nth-of-type(6) .card .inner .text, body #wrap .innerwrap input:nth-of-type(6):checked ~ .cards .cardwrap:nth-of-type(6) .card .inner .link { transition: opacity 0s ease-in-out, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease-in-out; transition-delay: 0.3s, 0.6s, 0s; transform: translateX(150%) rotateX(0deg); box-shadow: inherit; opacity: 1; } body #wrap .innerwrap input:nth-of-type(6):checked ~ .cards .cardwrap:nth-of-type(6) .card .inner .link { transition-delay: 0.3s, 0.75s, 0s; } body #wrap .innerwrap input:nth-of-type(6):checked ~ .cards .cardwrap:nth-of-type(6) .card .i.........完整代码请登录后点击上方下载按钮下载查看
网友评论0