http:\/\/swq2014.github.io\/tech\/object1.html<\/a><\/p>\n<style>
\n*{margin: 0;padding: 0}
\n.box{width: 100px;margin: 100px auto;}
\n.box ul{width: 100px;height: 100px;margin:100px;position: relative;animation: move 6s infinite linear;
\ntransform-style: preserve-3d;backface-visibility: hidden;}
\n.boxs{width: 100px;height: 100px;display: grid;border: 1px solid;border-radius: 8px;position: absolute;
\ngrid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);place-items:center center;
\ngrid-template-areas:
\n“a1 a2 a3”
\n“a4 a5 a6”
\n“a7 a8 a9″;
\n}
\n@keyframes move{
\n0%{transform: rotateY(0deg);}
\n20%{transform: rotateX(360deg);}
\n30%{transform: rotateX(0deg);}
\n50%{transform: rotateY(-360deg);}
\n70%{transform: rotateY(0deg);}
\n90%{transform: rotateX(380deg);}
\n100%{transform: rotateY(0deg);}
\n}
\n.box .boxs:nth-child(1){background-color:red; top: 0px;left: 0px;}
\n.box .boxs:nth-child(2){background-color:yellow; top: 0px;left: 100px;transform:rotateY(90deg);transform-origin: left;}
\n.box .boxs:nth-child(3){background-color: green; top: 0px;right: 100px;transform:rotateY(-90deg);transform-origin: right;}
\n.box .boxs:nth-child(4){background-color: blue;top: -100px;left: 0;transform: rotateX(90deg);transform-origin: bottom;}
\n.box .boxs:nth-child(5){background-color: orange;top: 100px;left: 0;transform: rotateX(-90deg);transform-origin: top;}
\n.box .boxs:nth-child(6){background-color: #0ee; top: 0px;left: 0px;transform: translateZ(-100px) rotateY(180deg);}
\n.boxs div{width: 20px;height: 20px;border-radius: 50%;background-color: black;}
\n.box1 div{grid-area: a5!important}
\n.boxs div:last-child{grid-area: a9}<\/p>\n
.box3 div:nth-child(2){grid-area:a5}<\/p>\n
.box4 div:nth-child(2){grid-area:a3}
\n.box4 div:nth-child(3){grid-area:a7}<\/p>\n
.box5 div:nth-child(2){grid-area:a3}
\n.box5 div:nth-child(3){grid-area:a5}
\n.box5 div:nth-child(4){grid-area:a7}<\/p>\n
.box6 div:nth-child(2){grid-area:a4}
\n.box6 div:nth-child(3){grid-area:a7}
\n.box6 div:nth-child(4){grid-area:a3}
\n.box6 div:nth-child(5){grid-area:a6}
\n<\/style><\/p>\n
<div class=”box”>
\n<ul>
\n<div class=”box1 boxs”>
\n<div><\/div>
\n<\/div>
\n<div class=”box2 boxs”>
\n<div><\/div>
\n<div><\/div>
\n<\/div>
\n<div class=”box3 boxs”>
\n<div><\/div>
\n<div><\/div>
\n<div><\/div>
\n<\/div>
\n<div class=”box4 boxs”>
\n<div><\/div>
\n<div><\/div>
\n<div><\/div>
\n<div><\/div>
\n<\/div>
\n<div class=”box5 boxs”>
\n<div><\/div>
\n<div><\/div>
\n<div><\/div>
\n<div><\/div>
\n<div><\/div>
\n<\/div>
\n<div class=”box6 boxs”>
\n<div><\/div>
\n<div><\/div>
\n<div><\/div>
\n<div><\/div>
\n<div><\/div>
\n<div><\/div>
\n<\/div>
\n<\/ul>
\n<\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
web\u524d\u7aefCSS3\u7279\u6548 \u7ffb\u8f6c\u7684\u9ab0\u5b50 \u6548\u679c\u4f53\u9a8chttp:\/\/swq2014.github.io\/tech\/obj […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-1595","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/www.9713job.com\/index.php?rest_route=\/wp\/v2\/posts\/1595","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.9713job.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.9713job.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.9713job.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.9713job.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1595"}],"version-history":[{"count":6,"href":"https:\/\/www.9713job.com\/index.php?rest_route=\/wp\/v2\/posts\/1595\/revisions"}],"predecessor-version":[{"id":1803,"href":"https:\/\/www.9713job.com\/index.php?rest_route=\/wp\/v2\/posts\/1595\/revisions\/1803"}],"wp:attachment":[{"href":"https:\/\/www.9713job.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1595"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.9713job.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1595"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.9713job.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}