demo:
https://codepen.io/dudleystorey/pen/kiajB
核心样式分析
- perspective: 1200px;透视
- transform-style: preserve-3d;开启3d
- transform-origin : 变形参考点
- -webkit-box-reflect: 元素倒影
- 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)
}}>
<
</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)
}}>
>
</span>
</div>
</div>