2

​ body {

​ margin: 0;

​ padding: 0;

​ height: 100vh;

​ width: 100vh;

​ background: url(images/0.jpg) no-repeat center/cover;

​ /*center/cover中cover是最优的解决方案,center 水平居中 */

​ }

​ .cube {

​ position: relative;

​ width: 300px;

​ height: 300px;

​ margin: 100px auto 0;

​ transform-style: preserve-3d;

​ animation: roll 4s linear infinite;

​ /* 开启父元素的3d模式 */

​ }

​ @keyframes roll {

​ 0% {

​ transform: rotateX(0deg) rotateY(0deg);

​ }

​ 100% {

​ transform: rotateX(360deg) rotateY(360deg);

​ }

​ }

​ /* @keyframes rotate是定义动画*/

​ .small {

​ /* float: left; 半脱离文档流 */

​ position: absolute;

​ top: 30px;

​ right: 100px;

​ /* 父亲相对定位position: relative;,子级给绝对定位position: absolute;,子级参照父级有一个偏移量,实现重叠 */

​ width: 300px;

​ height: 300px;

​ box-shadow: 0 0 50px 20px skyblue;

​ perspective: 1000px;

​ /* 最好加子元素上面,大小一致 */

​ transition:all 1s ease;

​ }

​ .small:nth-child(1) {

​ transform: rotateX(90deg) translateZ(150px) scale(1);

​ background: url(images/9.jpg) no-repeat center/cover;

​ border-radius: 20px;

​ }

​ .small:nth-child(2) {

​ transform: rotateX(-90deg) translateZ(150px) scale(1);

​ background: url(images/10.jpg) no-repeat center/cover;

​ border-radius: 20px;

​ }

​ .small:nth-child(3) {

​ transform: rotateY(90deg) translateZ(150px) scale(1);

​ background: url(images/11.jpg) no-repeat center/cover;

​ border-radius: 20px;

​ }

​ .small:nth-child(4) {

​ transform: rotateY(-90deg) translateZ(150px) scale(1);

​ background: url(images/12.jpg) no-repeat center/cover;

​ border-radius: 20px;

​ }

​ .small:nth-child(5) {

​ transform: translateZ(150px) scale(1);

​ background: url(images/15.jpg) no-repeat center/cover;

​ border-radius: 20px;

​ }

​ .small:nth-child(6) {

​ transform: translateZ(-150px) scale(1);

​ background: url(images/16.jpg) no-repeat center/cover;

​ border-radius: 20px;

​ }

.cube:hover .small:nth-child(1) {

​ transform: rotateX(90deg) translateZ(200px);

​ }

.cube:hover .small:nth-child(2) {

​ transform: rotateX(-90deg) translateZ(200px);

​ }

.cube:hover .small:nth-child(3) {

​ transform: rotateY(90deg) translateZ(200px);

​ }

.cube:hover .small:nth-child(4) {

​ transform: rotateY(-90deg) translateZ(200px);

​ }

.cube:hover .small:nth-child(5) {

​ transform: translateZ(200px);

​ }

.cube:hover .small:nth-child(6) {

​ transform: translateZ(-200px);

​ }