css3 相册3d旋转效果

demo:

https://codepen.io/dudleystorey/pen/kiajB

核心样式分析

1. perspective: 1200px;透视
2. transform-style: preserve-3d;开启3d
3. transform-origin : 变形参考点
4. -webkit-box-reflect: 元素倒影
5. transform: 变形

最终代码

less(css)

outSideDiv{
  margin: auto 0;
  position: relative;
  span{
    position: absolute;
    top: 40%;
    font-size: 3rem;
    color: #fff;
    cursor: pointer;
  }
  .leftSpan{
    cursor: pointer;
    left: 5%;
    z-index: 100;
  }
  .rightSpan{
    right: 5%;
  }
}

.carousel {
  perspective: 60vw;
  margin: auto 0;
  .spinner {
    transform-style: preserve-3d;
    height: 300px;
    transform-origin: 50% 50% -500px;
    transition: 1s;
    img{
      width: 40%;
      max-width: 425px;
      position: absolute;
      left: 30%;
      transform-origin: 50% 50% -500px;
      outline: 1px solid transparent;
      -webkit-box-reflect: below 16px -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,0.4));
      &:nth-child(1) {
        transform: rotateY(0deg);
      }
      &:nth-child(2) {
        transform: rotateY(-45deg);
      }
      &:nth-child(3) {
        transform: rotateY(-90deg);
      }
      &:nth-child(4) {
        transform: rotateY(-135deg);
      }
      &:nth-child(5) {
        transform: rotateY(-180deg);
      }
      &:nth-child(6) {
        transform: rotateY(-225deg);
      }
      &:nth-child(7) {
        transform: rotateY(-270deg);
      }
      &:nth-child(8) {
        transform: rotateY(-315deg);
      }
    }

  }
}

react组件

import React, {useRef, useState, useEffect,} from 'react';
import styles from './image-slider-1.less';
 let angle = 0;

  export default function ImageSlider(props) {
  const spinnerRef = useRef();
  const countTimer = useRef();

  function galleryspin(sign = '', e = undefined) {
    if (e && e.stopPropagation) {
      e.stopPropagation();
      e.preventDefault();
      clearInterval(countTimer.current);
    }

    let spinner = spinnerRef.current;
    if (!spinner) {
      return null;
    }
    if (!sign) {
      angle = angle + 45;
    } else {
      angle = angle - 45;
    }
    spinner.setAttribute("style", "transform: rotateY(" + angle + "deg);");
  }

  function setIntervalThis() {
    countTimer.current = setInterval(() => {
      galleryspin('');
    }, 3000);
  }

  useEffect(() => {
    setIntervalThis();
  }, []);
  return (
    <div className={styles.outSideDiv}>
      <span
        className={styles.leftSpan}
        onClick={(e) => {
          galleryspin('left', e)
        }}>
        &lt;
      </span>
      <div className={styles.carousel}>
        <figure className={styles.spinner} ref={spinnerRef}>
          <img src="/BigDataVisualization/componentExample/slider-imgs/wanaka-tree.jpg"/>
          <img src="/BigDataVisualization/componentExample/slider-imgs/still-lake.jpg"/>
          <img src="/BigDataVisualization/componentExample/slider-imgs/pink-milford-sound.jpg"/>
          <img src="/BigDataVisualization/componentExample/slider-imgs/paradise.jpg"/>
          <img src="/BigDataVisualization/componentExample/slider-imgs/morekai.jpg"/>
          <img src="/BigDataVisualization/componentExample/slider-imgs/milky-blue-lagoon.jpg"/>
          <img src="/BigDataVisualization/componentExample/slider-imgs/lake-tekapo.jpg"/>
          <img src="/BigDataVisualization/componentExample/slider-imgs/milford-sound.jpg"/>
        </figure>
        <span
          className={styles.rightSpan}
          onClick={(e) => {
            galleryspin('', e)
          }}>
        &gt;
      </span>
      </div>

    </div>