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

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

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

??????? .three-d-box {
??????????? /*任務(wù)六、給3D舞臺中“.three-d-box”設(shè)置過渡與變形效果*/
??????????? 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%;
??????? }

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

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