标题# 旋转木马效果
一、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-360from{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;}}
