css实现三维多层卡片书本悬浮翻转效果代码
代码语言:html
所属分类:悬停
代码描述:css实现三维多层卡片书本悬浮翻转效果代码,多层布局。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Belleza&display=swap"); .container { margin-top: 1rem; perspective: 1500px; } .card { position: relative; width: 350px; height: 450px; background: grey; border-radius: 10px; transform-style: preserve-3d; transition: transform 1s cubic-bezier(0.33, -0.05, 0.62, 1.4); animation: flip-once 3s cubic-bezier(0.33, -0.05, 0.62, 1.4) 1; } @keyframes flip-once { 35% { transform: rotateY(180deg); } 50% { transform: rotateY(180deg); } 65% { transform: rotateY(180deg); } } .container:hover .card { cursor: pointer; transform: rotateY(180deg); } .front, .back { display: flex; flex-direction: column; height: 450px; width: 350px; padding: 3rem 2rem 2rem; border: 4px solid #000; border-radius: 10px; box-shadow: 5px 5px 40px -5px rgba(0 0 0 / 1); transform-style: preserve-3d; } .front .background, .back .background { position: absolute; top: 1%; left: 1%; height: 98%; width: 98%; border-radius: 5px; transform-style: preserve-3d; transform: translateZ(30px); } .front .background { background: blue; } .back .background { background: green; } .front { background: dodgerblue; } .back { backface-visibility: hidden; transform: rotateY(180deg); position: absolute; top: 0; left: 0; background: lightgreen; } img { max-width: 300px; margin: 2rem 0; } h1 { font-size: 2.5rem; line-height:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0