css文件.content{    position: relative;    display: flex;    margin: 0 auto;    padding-top: 50px;    width: 1200px;    height: 380px;    background: url(../images/bg2.jpg) no-repeat;    background-size: 1200px 100%;

}.content .leftContent{    margin-right: 25px;    padding-left: 45px;    padding-bottom: 30px;    box-sizing: border-box;

}/* 旋转的图片 */.content .leftContent .leftContentItem{    width: 350px;    height: 350px;    /* 设置景深 */

perspective: 1000px;    /* 设置背景颜色在中间为椭圆形 */

/*background: radial-gradient(ellipse at center, #430d6d 0%, #000 100%);*/}.leftContent .leftContentItem .itemImg{    position: absolute;    left: 20%;    top: 20%;    width: 200px;    height: 200px;    /* 实现3D呈现 */

transform-style: preserve-3d;    transform: rotateX(-20deg) rotateY(-20deg);    -webkit-animation: 6s imgRotate linear infinite;    -o-animation: 6s imgRotate linear infinite;    animation: 6s imgRotate linear infinite;

}.leftContent .leftContentItem .itemImg *{    position: absolute;    width: 100%;    height: 100%;    box-shadow: 0 0 25px rgba(0, 128, 0, .4);

}.leftContentItem .itemImg .leftContentImg{    position: absolute;    width: 100%;    height: 100%;

}/* 分别对各个面进行旋转、平移操作 */.leftContentItem .itemImg .leftContentImg:nth-child(1){    transform: translateZ(100px);

}.leftContentItem .itemImg .leftContentImg:nth-child(2){    transform: rotateX(180deg) translateZ(100px);

}.leftContentItem .itemImg .leftContentImg:nth-child(3){    transform: rotateY(-90deg) translateZ(100px);

}.leftContentItem .itemImg .leftContentImg:nth-child(4){    transform: rotateY(90deg) translateZ(100px);

}.leftContentItem .itemImg .leftContentImg:nth-child(5){    transform: rotateX(90deg) translateZ(100px);

}.leftContentItem .itemImg .leftContentImg:nth-child(6){    transform: rotateX(-90deg) translateZ(100px);

}

@-webkit-keyframes imgRotate {    from{        transform: translateZ(-100px) rotateX(0) rotateY(0);

}    to{        transform: translateZ(-100px) rotateX(360deg) rotateY(360deg);

}

}

效果图

image.png

作者：IT智云编程

链接：https://www.jianshu.com/p/811b39f8da6c