??????????? /* 任務三、設置3D舞臺布景 */
??????????? perspective: 200px;
??? ?
??????????? /*任務四、設置3D舞臺布景過渡效果*/
??????????? transition: all 0.7s linear;
???? ?
??????????? position: relative;
??????? }

??????????? .three-d:not(.active):hover {
??????????????? cursor: pointer;
??????????? }

??????????????? /*任務五、給不是當前狀態(tài)的3D舞臺的懸浮與聚焦狀態(tài)設置變形效果*/
??????????????? .three-d:not(.active):hover .three-d-box,
??????????????? .three-d:not(.active):focus .three-d-box {
??????????????????? transform: translateZ(-25px) rotateX(90deg);
??????????????? }

??????? .three-d-box {
??????????? /*任務六、給3D舞臺中“.three-d-box”設置過渡與變形效果*/
??????????? transform: translateZ(-25px);
??????????? transition: all .3s ease-out;
??????????? transform-style: preserve-3d;
??????????? pointer-events: none;
??????????? position: absolute;
??????????? top: 0;
??????????? left: 0;
??????????? display: block;
??????????? width: 100%;
??????????? height: 100%;
??????? }

??????? /*任務七、給導航設置3D前，與3D后變形效果*/
??????? .front {
??????????? transform: rotateX(0deg) translateZ(25px);
??? ?
??????? }

??????? .back {
??????????? transform: rotateX(-90deg) translateZ(25px);
??????????? color: #FFE7C4;
??????? }