/* 通配符选择器：清除所有HTML元素默认的内边距和外边距，统一页面基础样式 */ 
* { 
    padding: 0; 
    margin: 0; 
} 
 
/* 魔方外容器样式 */ 
.xf_box { 
    /* 设置3D透视效果，值越大透视压缩感越弱，让子元素的3D变换呈现近大远小的立体视觉 */ 
    perspective: 500px; 
    /* 绝对定位：脱离文档流，可自由控制元素位置 */ 
    position: absolute; 
    /* 距离页面左侧10%的位置 */ 
    left: 10%; 
    /* 距离页面底部0距离，贴靠页面底部 */ 
    bottom: 0; 
} 
 
/* 魔方主体容器样式 */ 
.xf_box .xf_rubik_cube { 
    /* 相对定位：作为子元素绝对定位的参考父容器 */ 
    position: relative; 
    /* 魔方的宽度 */ 
    width: 100px; 
    /* 魔方的高度 */ 
    height: 100px; 
    /* 上下外边距200px，左右自动计算，实现容器水平居中 */ 
    margin: 200px auto; 
    /* 文本水平居中，用于魔方面上的文字垂直居中辅助 */ 
    text-align: center; 
    /* 开启3D空间：让子元素的3D变换在同一立体空间中生效，不会扁平化 */ 
    transform-style: preserve-3d; 
    /* 绑定旋转动画：动画名lovexf、时长15秒、线性匀速播放、无限循环 */ 
    animation: lovexf 15s linear infinite; 
} 
 
/* 定义魔方的旋转动画，动画名为lovexf */ 
@keyframes lovexf { 
    /* 动画初始状态（0%进度）：X轴旋转0度，无旋转变化 */ 
    0% { 
        transform: rotateX(0); 
    } 
 
    /* 动画25%进度：沿X、Y轴共同旋转230度，呈现斜向旋转效果 */ 
    25% { 
        transform: rotate3d(1, 1, 0, 230deg); 
    } 
 
    /* 动画50%进度：沿-X、Y轴共同旋转220度，反向斜向旋转 */ 
    50% { 
        transform: rotate3d(-1, 1, 0, 220deg); 
    } 
 
    /* 动画75%进度：沿X、-Y轴共同旋转200度，另一个方向的斜向旋转 */ 
    75% { 
        transform: rotate3d(1, -1, 0, 200deg); 
    } 
 
    /* 动画结束状态（100%进度）：X轴旋转180度，完成一轮动画循环 */ 
    100% { 
        transform: rotateX(180deg); 
    } 
} 
 
/* 鼠标悬停在魔方容器上时，暂停动画播放 */ 
.xf_box .xf_rubik_cube:hover { 
    animation-play-state: paused; 
} 
 
/* 魔方单个面的基础样式 */ 
.xf_box .xf_rubik_cube .handsome_xf { 
    /* 绝对定位：让6个魔方面初始时重叠在父容器同一位置 */ 
    position: absolute; 
    /* 左侧对齐父容器 */ 
    left: 0; 
    /* 顶部对齐父容器 */ 
    top: 0; 
    /* 宽度占满父容器 */ 
    width: 100%; 
    /* 高度占满父容器 */ 
    height: 100%; 
    /* 行高等于容器高度，实现文本垂直居中 */ 
    line-height: 100px; 
    /* 文本颜色为白色 */ 
    color: white; 
    /* 去除链接的默认下划线 */ 
    text-decoration: none; 
    /* 字体大小为父元素字体的0.7倍 */ 
    font-size: .7em; 
    /* 过渡效果：仅针对font-size属性，变化时长0.5秒，实现平滑放大 */ 
    transition: font-size .5s; 
    /* 溢出隐藏：防止文本超出容器范围显示 */ 
    overflow: hidden; 
} 
 
/* 鼠标悬停在魔方单个面上时，字体放大到父元素字体的1倍 */ 
.xf_box .xf_rubik_cube .handsome_xf:hover { 
    font-size: 1em; 
} 
 
/* 魔方第1个面：Y轴0度旋转，向前平移50px（魔方边长的一半），背景色深粉色 */ 
.xf_box .xf_rubik_cube .handsome_xf:nth-child(1) { 
    transform: rotateY(0) translateZ(50px); 
    background-color: deeppink; 
} 
 
/* 魔方第2个面：Y轴90度旋转，向前平移50px，背景色深海蓝 */ 
.xf_box .xf_rubik_cube .handsome_xf:nth-child(2) { 
    transform: rotateY(90deg) translateZ(50px); 
    background-color: dodgerblue; 
} 
 
/* 魔方第3个面：Y轴180度旋转，向前平移50px，背景色深橙色 */ 
.xf_box .xf_rubik_cube .handsome_xf:nth-child(3) { 
    transform: rotateY(180deg) translateZ(50px); 
    background-color: darkorange; 
} 
 
/* 魔方第4个面：Y轴270度旋转，向前平移50px，背景色深绿色 */ 
.xf_box .xf_rubik_cube .handsome_xf:nth-child(4) { 
    transform: rotateY(270deg) translateZ(50px); 
    background-color: darkgreen; 
} 
 
/* 魔方第5个面：X轴90度旋转，向前平移50px，背景色浅鲑鱼色 */ 
.xf_box .xf_rubik_cube .handsome_xf:nth-child(5) { 
    transform: rotateX(90deg) translateZ(50px); 
    background-color: lightsalmon; 
} 
 
/* 魔方第6个面：X轴-90度旋转，向前平移50px，背景色蓝紫色 */ 
.xf_box .xf_rubik_cube .handsome_xf:nth-child(6) { 
    transform: rotateX(-90deg) translateZ(50px); 
    background-color: blueviolet; 
} 
 
/* 魔方面上图片的样式：宽度和高度占满所在的面容器 */ 
.xf_box .xf_rubik_cube .handsome_xf img { 
    width: 100%; 
    height: 100%; 
}