body { color: #333; padding: 20px; text-align: center; font-family: Arial; } .separator { margin-top: 40px; } .twitter { color: #FFF; text-decoration: none; border-radius: 4px; background: #00ACED; display: inline-block; padding: 10px 8px; margin-bottom: 15px; font-weight: bold; } .space3d { perspective: 1000px; width: 250px; height: 250px; text-align: center; display: inline-block; } ._3dbox { display: inline-block; transition: all 0.85s; text-align: center; position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(-15deg) rotateY(15deg); } ._3dface { overflow: hidden; position: absolute; border: 1px solid #888; background: #FFF; box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 0, 0, 0.3); color: #333; line-height: 250px; opacity: 0.8; } ._3dface--front { width: 250px; height: 250px; transform: translate3d(0, 0, 125px); } ._3dface--top { width: 250px; height: 250px; transform: rotateX(90deg) translate3d(0, 0, 125px); } ._3dface--bottom { width: 250px; height: 250px; transform: rotateX(-90deg) translate3d(0, 0, 125px); } ._3dface--left { width: 250px; height: 250px; left: 50%; margin-left: -125px; transform: rotateY(-90deg) translate3d(0, 0, 125px); } ._3dface--right { width: 250px; height: 250px; left: 50%; margin-left: -125px; transform: rotateY(90deg) translate3d(0, 0, 125px); } ._3dface--back { width: 250px; height: 250px; transform: rotateY(180deg) translate3d(0, 0, 125px); } #radio-left:checked ~ .space3d ._3dbox { transform: rotateY(90deg); } #radio-right:checked ~ .space3d ._3dbox { transform: rotateY(-90deg); } #radio-bottom:checked ~ .space3d ._3dbox { transform: rotateX(90deg); } #radio-top:checked ~ .space3d ._3dbox { transform: rotateX(-90deg); } #radio-back:checked ~ .space3d ._3dbox { transform: rotateY(180deg); } ._3dface--front { background: url(img/背景图片/1111111.png); background-size: 100%; } ._3dface--left { background: url(img/背景图片/90c2a7d1d995d6c37114d0bf61e1533a.jpg); background-size: auto 100%; } ._3dface--right { background: url(img/背景图片/b9a5cbdce3c2b1a72470685a2106f98e.jpg); background-size: auto 100%; } ._3dface--top { background: url(img/背景图片/download.jpg); background-size: auto 100%; } ._3dface--bottom { background: url(img/背景图片/u=25449582,2238308793&fm=15&gp=0.jpg); background-size: auto 100%; } ._3dface--back { background: url(img/背景图片/u=2984323656,369738739&fm=26&gp=0.jpg); background-size: auto 100%; } |