<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <style> /* 使背面不可见！ */ /* .box div { backface-visibility: hidden; } */ .box { /* perspective: 1200px; */ } .box { width: 300px; height: 300px; position: fixed; left: 0; right: 0; top: 0; bottom: 0; margin: auto; /* 3D的空间 */ transform-style: preserve-3d; transform: rotateX(20deg) rotateY(20deg); } .box div { width: 300px; height: 300px; text-align: center; line-height: 300px; font-size: 100px; font-weight: bolder; color: #fff; /* 让6个面全部定位在父元素里面 */ position: absolute; left: 0; top: 0; opacity: 0.5; /* 透明 */ border: 2px solid #000; } .con1 { /* 第一个面往前走 */ background: red; transform: translateZ(150px); } .con2 { /* 第二个面往后走 */ background: blue; transform: translateZ(-150px) rotateY(180deg); /*rotateY(180deg) 让正面朝外*/ } .con3 { /* 先往上位移150px 再绕着X轴转动90deg */ background: pink; transform: translateY(-150px) rotateX(90deg); } .con4 { /* 先往下位移150px,再绕着X轴转动90deg */ background: green; transform: translateY(150px) rotateX(-90deg); } .con5 { /* 先往左位移150px , 再绕着Y轴转动90deg */ background: rosybrown; transform: translateX(-150px) rotateY(-90deg); } .con6 { /* 先往右侧位移150px,再绕着Y轴转动90deg */ background: #000; transform: translateX(150px) rotateY(90deg); } </style> </head> <body> <div class="box"> <div class="con1">1</div> <div class="con2">2</div> <div class="con3">3</div> <div class="con4">4</div> <div class="con5">5</div> <div class="con6">6</div> </div> </body> <script> // rotateX(20deg) rotateY(20deg); a = 1 setInterval(() => { a = a + 50 console.log(a) $('.box').css({ "transform": "rotateX(" + a + "deg) rotateY(" + a + "deg)", }); }, 1000); </script> </html>