css 实现旋转木马效果

标题# 旋转木马效果

一、css实现旋转木马效果

代码如下（示例）：

import React, { Component } from 'react'
// 旋转木马效果
import './Test2.less'
export default class Test2 extends Component {
  render() {
    const src1 = require('../img/1.png')
    const src2 = require('../img/2.png')
    const src3 = require('../img/3.png')
    const src4 = require('../img/4.png')
    const src5 = require('../img/5.png')
    const src6 = require('../img/6.png')

    return (
      <div className="container">
        <div className="pic">
          <img src={src1} alt="" />
          <img src={src2} alt="" />
          <img src={src3} alt="" />
          <img src={src4} alt="" />
          <img src={src5} alt="" />
          <img src={src6} alt="" />
        </div>
      </div>
    )
  }
}

css部分

代码如下（示例）：

.container{
    display: flex;
    justify-content: center;
    margin-top: 300px;
    perspective: 1500px;  // 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
    @keyframes action { // 动画沿Y轴旋转从0-360
        from{
            transform: rotateY(0deg);
        }
        to{
            transform: rotateY(360deg);
        }
    }
    .pic{
        width: 350px;
        display: flex;
        transform-style: preserve-3d; // 表示所有子元素在3D空间中呈现。
        animation: action 20s linear infinite;  // 动画20秒完成，匀速，重复播放
        img{
            width: 350px;
            position: absolute;// 将所有图片定位到同一位置（重叠在一起）
            -webkit-box-reflect: below 15px -webkit-linear-gradient(transparent 10%,rgba(255,255,255,0.3));   // 设置倒影，线性渐变
        }
        img:nth-child(1){
           transform: translateZ(500px);
        }
        img:nth-child(2){
            transform:rotateY(60deg) translateZ(500px);
         }
         img:nth-child(3){
            transform:rotateY(120deg) translateZ(500px);
         }
         img:nth-child(4){
            transform:rotateY(180deg) translateZ(500px);
         }
         img:nth-child(5){
            transform:rotateY(240deg) translateZ(500px);
         }
         img:nth-child(6){
            transform:rotateY(300deg) translateZ(500px);
         }
         
    }
    // hover时停止动画
    .pic:hover{
        animation-play-state: paused;
    }
    
}
![在这里插入图片描述](https://img-blog.csdnimg.cn/e770e69c702b45d7b507a5cd9dadd842.png)

这篇好文章是转载于：学新通技术网