css实现逼真翻书效果代码
代码语言:html
所属分类:其他
代码描述:css实现逼真翻书效果代码,点击可翻书,无js代码,纯粹是div+css实现。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { height: 100%; margin: 0; padding: 0; } .container { background-color: rgba(110, 124, 222, 0.5); height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; } input[type=checkbox] { display: none; } h1 { margin: 0; } #page1 ~ .pages div.page1 { -webkit-transform: rotateY(-34deg); -moz-transform: rotateY(-34deg); transform: rotateY(-34deg); } #page1:checked ~ .pages div.page1 { -webkit-transform: rotateY(-140deg); -moz-transform: rotateY(-140deg); transform: rotateY(-140deg); } #page2 ~ .pages div.page2 { -webkit-transform: rotateY(-32deg); -moz-transform: rotateY(-32deg); transform: rotateY(-32deg); } #page2:checked ~ .pages div.page2 { -webkit-transform: rotateY(-140deg); -moz-transform: rotateY(-140deg); transform: rotateY(-140deg); } #page3 ~ .pages div.page3 { -webkit-transform: rotateY(-30deg); -moz-transform: rotateY(-30deg); transform: rotateY(-30deg); } #page3:checked ~ .pages div.page3 { -webkit-transform: rotateY(-140deg); -moz-transform: rotateY(-140deg); transform: rotateY(-140deg); } #page4 ~ .pages div.page4 { -webkit-transform: rotateY(-28deg); -moz-transform: rotateY(-28deg); transform: rotateY(-28deg); } #page4:checked ~ .pages div.page4 { -webkit-transform: rotateY(-140deg); -moz-transform: rotateY(-140deg); transform: rotateY(-140deg); } .book { position: relative; width: 160px; height: 180px; margin-left: 160px; -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .book .pages, .book .pages > div { position: absolute; top: 0; left: 0; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .book .pages { width: 100%; height: 98%; top: 1%; left: 3%; z-index: 10; } .book .pages > div { width: 100%; height: 100%; -webkit-transform-origin: left center;.........完整代码请登录后点击上方下载按钮下载查看
网友评论0