{"id":490,"date":"2020-02-16T21:35:03","date_gmt":"2020-02-16T13:35:03","guid":{"rendered":"https:\/\/blog.cqdefxxx.com\/?p=490"},"modified":"2020-02-16T21:35:03","modified_gmt":"2020-02-16T13:35:03","slug":"%e4%b8%aa%e4%ba%ba%e8%b5%84%e6%96%99%e5%8d%a13d%e6%97%8b%e8%bd%ac%e6%95%88%e6%9e%9c","status":"publish","type":"post","link":"https:\/\/blog.viter.top\/index.php\/2020\/02\/16\/%e4%b8%aa%e4%ba%ba%e8%b5%84%e6%96%99%e5%8d%a13d%e6%97%8b%e8%bd%ac%e6%95%88%e6%9e%9c\/","title":{"rendered":"\u4e2a\u4eba\u8d44\u6599\u53613D\u65cb\u8f6c\u6548\u679c"},"content":{"rendered":"

\u5c55\u793a\u5730\u5740\uff1ahttp:\/\/show.cqdefxxx.com\/business%20card%20with%203d%20flip%20animation\/<\/a><\/p>\n

<!DOCTYPE html>\n<html>\n\t<head>\n\t\t<meta charset=\"utf-8\">\n\t\t<title><\/title>\n        <link rel=\"stylesheet\" href=\"style.css\">\n        <link href=\"https:\/\/cdn.bootcss.com\/font-awesome\/5.8.2\/css\/all.css\" rel=\"stylesheet\">\n        <script src=\"https:\/\/cdn.bootcss.com\/jquery\/3.4.1\/jquery.min.js\"><\/script>\n\t<\/head>\n\t<body>\n        <div class=\"business-card middle\">\n            <div class=\"front\">\n                <h2>Hello Welcome!<\/h2>\n                <span>FonetEnd Engineer<\/span>\n                <ul class=\"contact-info\">\n                    <li>\n                        <i class=\"fas fa-mobile-alt\"><\/i> 13697252729\n                    <\/li>\n                    <li>\n                        <i class=\"far fa-envelope\"><\/i> xyqxxx12@foxmail.com\n                    <\/li>\n                    <li>\n                        <i class=\"fas fa-map-marker-alt\"><\/i> China,Fujian\n                    <\/li>\n                <\/ul>\n            <\/div>\n            <div class=\"back\">\n                xyqxxx12\u70b9\u51fb\u6211\n            <\/div>\n        <\/div>\n        <script type=\"text\/javascript\">\n            $(\".business-card\").click(function(){\n                $(\".business-card\").toggleClass(\"business-card-active\");\n            })\n        <\/script>\n\t<\/body>\n<\/html>\n<\/code><\/pre>\n
style.css<\/p>\n
*{\n    margin:0;\n    padding: 0;\n    font-family: \"montserrat\",sans-serif;\n    box-sizing: border-box;\n    list-style: none;\n}\n\nbody{\n    background: url(bg.png) no-repeat;\n    background-size: cover;\n    min-height: 100vh;\n    min-width: 80vh;\n}\n\n.business-card{\n    width:500px;\n    height: 280px;\n\n}\n\n.middle{\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform:translate(-50%,-50%);\n}\n\n.front,.back{\n    width:100%;\n    height: 100%;\n    overflow: hidden;    \n    position: absolute;\n    backface-visibility: hidden;\n    transition: transform 0.5s linear;\n}\n\n.front{\n    background: rgba(255,255,255,0.7);\n    padding:40px;\n    transform: perspective(600px) rotateX(180deg);\n}\n\n.front:before,.front:after{\n    content: \"\";\n    position: absolute;\n    right: 0;\n}\n\n.front:before{\n    width:0px;\n    height: 0px;\n    bottom: 0;\n    border-bottom: 200px solid #065279;\n    border-left: 100px solid transparent;\n}\n\n.front:after{\n    width:0px;\n    height: 0px;\n    top: 0;\n    border-top: 200px solid #065279;\n    border-left: 100px solid transparent;\n}\n\n.front span{\n    background: #065279;\n    color:#fff;\n    padding:4px 18px;\n    display: inline-block;\n    margin-bottom: 20px;\n    font-size:14px;\n}\n\n\n.front .contact-info li{\n    margin:10px 0;\n    display: flex;\n    align-items: center;\n}\n\n.front .contact-info li i{\n    width:26px;\n    height: 26px;\n    background: #065279;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-right:6px;\n}\n.back{\n    background: rgba(0,0,0,0.7);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    color: #fff;\n    letter-spacing: 6px;\n    font-size: 24px;\n    transform: perspective(600px) rotateX(0deg);\n}\n\n.business-card-active .front{\n    transform: perspective(600px) rotateX(0deg);\n}\n.business-card-active .back{\n    transform: perspective(600px) rotateX(-180deg);\n}<\/code><\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
\u5c55\u793a\u5730\u5740\uff1ahttp:\/\/show.cqdefxxx.com\/business%20card%20with%203d%20flip% …<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[3],"_links":{"self":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/490"}],"collection":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/comments?post=490"}],"version-history":[{"count":0,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/490\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/media?parent=490"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/categories?post=490"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/tags?post=490"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}