{"id":700,"date":"2017-03-04T19:53:38","date_gmt":"2017-03-04T11:53:38","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=700"},"modified":"2017-03-04T19:53:38","modified_gmt":"2017-03-04T11:53:38","slug":"css3-3d%e7%ab%8b%e6%96%b9%e4%bd%93","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=700","title":{"rendered":"CSS3 – 3D\u7acb\u65b9\u4f53"},"content":{"rendered":"
<!doctype html>\r\n<html>\r\n <head>\r\n  <meta charset=\"UTF-8\">\r\n  <title>3D\u7acb\u65b9\u4f53<\/title>\r\n  <style>\r\n    .box{\r\n        width: 249px;\r\n        height: 249px;\r\n        border: 1px dashed #000;\r\n        margin: 120px auto;\r\n        border-radius: 250px;\r\n        position: relative;\r\n\r\n        \/* \u8ba9\u5b50\u76d2\u5b50\u4fdd\u63013D\u6548\u679c *\/\r\n        transform-style: preserve-3d;\r\n        \r\n        \/* \u7236\u76d2\u5b50\u53d8\u6362 *\/\r\n        \/* transform:rotateX(30deg) rotateY(-30deg); *\/\r\n        \r\n        \/* \u52a8\u753b*\/\r\n        animation: gun 8s linear infinite;\r\n    }\r\n    \/* \u7231\u5fc3 *\/\r\n    .box::before,.box::after{\r\n        content: \"\";\r\n        width: 50px;\r\n        height: 80px;\r\n        background: pink;\r\n        position: absolute;\r\n        border-radius: 50px 50px 0 0;\r\n        top: 50%;\r\n        left: 50%;\r\n    }\r\n    .box::before{\r\n        transform: rotate(-45deg);\r\n        margin-left: -36px;\r\n        margin-top: -40px;\r\n    }\r\n    .box::after{\r\n        transform: rotate(45deg);       \r\n        margin-left: -16px;\r\n        margin-top: -40px;\r\n    }\r\n    \r\n    @keyframes gun{\r\n        0%{\r\n            transform:rotateX(0deg) rotateY(0deg)\r\n        }\r\n        100%{\r\n            transform:rotateX(360deg) rotateY(360deg)\r\n        }\r\n    }\r\n    \/* \u9009\u4e2dbox\u4e0b\u9762\u7684\u6240\u6709div *\/\r\n    .box > div{\r\n        width: 100%;\r\n        height: 100%;       \r\n        text-align: center;     \r\n        line-height: 250px;\r\n        font-size: 60px;\r\n        position: absolute;\r\n        color: #fff;\r\n    }\r\n    \/* \u5de6\u76d2\u5b50 *\/\r\n    .left{\r\n        background-color: rgba(255,0,0,0.3);\r\n        transform-origin: left;\r\n        transform: rotateY(-90deg) translateX(-125px);\r\n    }\r\n    \/* \u53f3\u76d2\u5b50 *\/\r\n    .right{\r\n        background-color:rgba(0,255,0,0.3);\r\n        transform-origin: right;\r\n        transform: rotateY(90deg)translateX(125px);\r\n    }\r\n    \/* \u524d\u76d2\u5b50 *\/\r\n    .forward{\r\n        background-color: rgba(0,0,255,0.3);\r\n        transform: translateZ(125px);\r\n    }\r\n    \/* \u540e\u76d2\u5b50 *\/\r\n    .back{\r\n        background-color: rgba(0,125,125,0.3);\r\n        transform: rotateY(-180deg) translateZ(125px);\r\n    }\r\n    \/* \u4e0a\u76d2\u5b50 *\/\r\n    .up{\r\n        background-color: rgba(125,125,0,0.3);\r\n        transform: rotateX(90deg) translateZ(125px);\r\n    }\r\n    \/* \u4e0b\u76d2\u5b50 *\/\r\n    .down{\r\n        background-color: rgba(125,125,225,0.3);\r\n        transform: rotateX(-90deg) translateZ(125px);\r\n    }\r\n  <\/style>\r\n <\/head>\r\n <body>\r\n  <div>\r\n    <div>\u4e0a<\/div>\r\n    <div>\u4e0b<\/div>\r\n    <div>\u5de6<\/div>\r\n    <div>\u53f3<\/div>\r\n    <div>\u524d<\/div>\r\n    <div>\u540e<\/div>\r\n  <\/div>\r\n <\/body>\r\n<\/html><\/pre>\n
\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » CSS3 – 3D\u7acb\u65b9\u4f53<\/a><\/p>","protected":false},"excerpt":{"rendered":"
<!doctype html> <html> <head> <meta charset=”UTF-8″> <title>3D\u7acb\u65b9\u4f53<\/ […]<\/p>\n","protected":false},"author":1,"featured_media":102,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[12],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/700"}],"collection":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=700"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/700\/revisions"}],"predecessor-version":[{"id":701,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/700\/revisions\/701"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/media\/102"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=700"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=700"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=700"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}