纯css模拟书本立体交互倾斜效果代码
代码语言:html
所属分类:悬停
代码描述:纯css模拟书本立体交互倾斜效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html { height: 100%; } body { margin: 0; min-height: 100%; background-color: #fff; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; color: #333; } /*Webflow standard classes */ html.w-mod-touch * { background-attachment: scroll !important; } .w-block { display: block; } .w-inline-block { max-width: 100%; display: inline-block; } .w-webflow-badge, .w-webflow-badge * { position: static; left: auto; top: auto; right: auto; bottom: auto; z-index: auto; display: block; visibility: visible; overflow: visible; overflow-x: visible; overflow-y: visible; box-sizing: border-box; width: auto; height: auto; max-height: none; max-width: none; min-height: 0; min-width: 0; margin: 0; padding: 0; float: none; clear: none; border: 0 none transparent; border-radius: 0; background: none; background-image: none; background-position: 0% 0%; background-size: auto auto; background-repeat: repeat; background-origin: padding-box; background-clip: border-box; background-attachment: scroll; background-color: transparent; box-shadow: none; opacity: 1.0; transform: none; transition: none; direction: ltr; font-family: inherit; font-weight: inherit; color: inherit; font-size: inherit; line-height: inherit; font-style: inherit; font-variant: inherit; text-align: inherit; letter-spacing: inherit; text-decoration: inherit; text-indent: 0; text-transform: inherit; list-style-type: disc; text-shadow: none; font-smoothing: auto; vertical-align: baseline; cursor: inherit; white-space: inherit; word-break: normal; word-spacing: normal; word-wrap: normal; } .w-webflow-badge { position: fixed !important; display: inline-block !important; visibility: visible !important; opacity: 1 !important; z-index: 2147483647 !important; top: auto !important; right: 12px !important; bottom: 12px !important; left: auto !important; color: #AAADB0 !important; background-color: #fff !important; border-radius: 3px !important; padding: 6px 8px 6px 6px !important; font-size: 12px !important; opacity: 1.0 !important; line-height: 14px !important; text-decoration: none !important; transform: none !important; margin: 0 !important; width: auto !important; height: auto !important; overflow: visible !important; white-space: nowrap; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.1); } .w-webflow-badge > img { display: inline-block !important; visibility: visible !important; opacity: 1 !important; vertical-align: middle !important; } .w-richtext:before, .w-richtext:after { content: " "; display: table; } .w-richtext:after { clear: both; } .w-richtext[contenteditable="true"]:before, .w-richtext[contenteditable="true"]:after { white-space: initial; } /*-----------------------*/ h3 { margin-top: 20px; margin-bottom: 10px; font-size: 24px; line-height: 30px; font-weight: bold; } h6 { margin-top: 10px; margin-bottom: 10px; font-size: 12px; line-height: 18px; font-weight: bold; } p { margin-top: 0; margin-bottom: 10px; } a { text-decoration: underline; } .scene { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; height: 54vw; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; background-color: #fff; -webkit-perspective: 4000px; perspective: 4000px; -webkit-perspective-origin: 50% 0%; perspective-origin: 50% 0%; } .book-wrap { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 57vw; margin-top: 8vw; margin-bottom: 8vw; padding-right: 1%; padding-left: 1%; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-perspective: 4000px; perspective: 4000px; -webkit-perspective-origin: 50% 50%; perspective-origin: 50% 50%; -webkit-transform: translate3d(0px, 5%, -264px) rotateX(27deg) rotateY(0deg) rotateZ(-10deg); transform: translate3d(0px, 5%, -264px) rotateX(27deg) rotateY(0deg) rotateZ(-10deg); -webkit-transition: -webkit-transform 2000ms cubic-bezier(.165, .84, .44, 1); transition: -webkit-transform 2000ms cubic-bezier(.165, .84, .44, 1); transition: transform 2000ms cubic-bezier(.165, .84, .44, 1); transition: transform 2000ms cubic-bezier(.165, .84, .44, 1), -webkit-transform 2000ms cubic-bezier(.165, .84, .44, 1); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .book-wrap:hover { -webkit-transform: translate3d(0px, 5%, -264px) rotateX(13deg) rotateY(0deg) rotateZ(-3deg); transform: translate3d(0px, 5%, -264px) rotateX(13deg) rotateY(0deg) rotateZ(-3deg); } .book-cover-left { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; border-top-left-radius: 4%; border-bottom-left-radius: 4%; background-color: #2e1800; box-shadow: inset 4px -4px 4px 1px #635648, inset 7px -7px 4px 0 #221b14; -webkit-perspective: 4000px; perspective: 4000px; -webkit-transform: translate3d(0px, 0px, -1px); transform: translate3d(0px, 0px, -1px); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .book-cover-right { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; border-top-right-radius: 4%; border-bottom-right-radius: 4%; background-color: #2e1800; box-shadow: inset -4px -4px 4px 1px #635648, inset -7px -7px 4px 0 #221b14; } .layer1 { position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 20px 10px 10px; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-transform: translate3d(0px, 0px, 5px); transform: translate3d(0px, 0px, 5px); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .page-left { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; border-top-left-radius: 1%; border-bottom-left-radius: 1%; background-color: #fff; box-shadow: inset 0 0 26px 2px #d8cccc, -1px 1px 13px 0 rgba(34, 27, 20, .81); } .layer-text { position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 97%; margin: 20px 10px 18px; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 4000px; perspective: 4000px; -webkit-perspective-origin: 50% 50%; perspective-origin: 50% 50%; -webkit-transform: translate3d(0px, 0px, 32px); transform: translate3d(0px, 0px, 32px); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .layer-text.right { -webkit-transform: translate3d(-37px, 0px, 32px); transform: translate3d(-37px, 0px, 32px); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .page-left-2 { position: relative; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; border-top-left-radius: 18%; border-bottom-left-radius: 1%; background-color: #fff; box-shadow: inset 0 0 7px 4px hsla(0, 13%, 82%, .43), -1px 1px 13px 0 rgba(34, 27, 20, .49); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: rotateX(0deg) rotateY(17deg) rotateZ(0deg); transform: rotateX(0deg) rotateY(17deg) rotateZ(0deg); -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transition: -webkit-transform 650ms cubic-bezier(.165, .84, .44, 1); transition: -webkit-transform 650ms cubic-bezier(.165, .84, .44, 1); transition: transform 650ms cubic-bezier(.165, .84, .44, 1); transition: transform 650ms cubic-bezier(.165, .84, .44, 1), -webkit-transform 650ms cubic-bezier(.165, .84, .44, 1); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .page-left-2:hover { -webkit-transform: rotateX(0deg) rotateY(7deg) rotateZ(0deg); transform: rotateX(0deg) rotateY(7deg) rotateZ(0deg); } .left-side { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 49%; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 4000px; perspective: 4000px; -webkit-perspective-origin: 0% 50%; perspective-origin: 0% 50%; -webkit-transform: rotateX(0deg) rotateY(20deg) rotateZ(0deg); transform: rotateX(0deg) rotateY(20deg) rotateZ(0deg); -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .right-side { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 49%; -webkit-perspective: 4000px; perspective: 4000px; -webkit-perspective-origin: 0% 50%; perspective-origin: 0% 50%; -webkit-transform: rotateX(0deg) rotateY(-1deg) rotateZ(0deg); transform: rotateX(0deg) rotateY(-1deg) rotateZ(0deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .center { width: 3%; background-image: -webkit-radial-gradient(circle farthest-corner at 56% -8%, #fff 8%, transparent 0), -webkit-radial-gradient(circle farthest-corner at 50% 108%, #fff 8%, transparent 0), -webkit-linear-gradient(0deg, #635648, #2e1800 21%, #635648 30%, #2e1800 48%, #635648 68%, #2e1800 79%, #635648); background-image: radial-gradient(circle farthest-corner at 56% -8%, #fff 8%, transparent 0), radial-gradient(circle farthest-corner at 50% 108%, #fff 8%, transparent 0), linear-gradient(90deg, #635648, #2e1800 21%, #635648 30%, #2e1800 48%, #635648 68%, #2e1800 79%, #635648); } .corner-fold { position: absolute; left: 0px; top: 0px; width: 30px; height: 30px; border-right: 1px solid hsla(0, 13%, 82%, .55); border-bottom: 1px solid hsla(0, 13%, 82%, .55); background-image: -webkit-linear-gradient(315deg, transparent 47%, #f0f0f0 48%, #fff 55%, #f6f6f6); background-image: linear-gradient(135deg, transparent 47%, #f0f0f0 48%, #fff 55%, #f6f6f6); box-shadow: 6px 6px 9px -4px hsla(0, 13%, 82%, .53); } .corner { position: absolute; left: 0px; top: 27px; width: 5vw; height: 5vw; background-image: -webkit-linear-gradient(315deg, #fff 30%, transparent); background-image: linear-gradient(135deg, #fff 30%, transparent); box-shadow: inset 13px 0 17px -12px hsla(0, 13%, 82%, .43); } .corner2 { position: absolute; left: 28px; top: 0px; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0