CSS(三) 旋转三棱柱滚筒组件

轴的计算方式：height/(2*3**2)
设计思路：
1、div相对路径下包含3个div绝对路径设置背景图，进行旋转
2、旋转首先定义一个中心点 transform-origin 其中Z轴方向与translateZ相反，正数为近，负数为远
3、判断需求要绕哪个轴旋转，注意：与旋转面垂直的轴即为旋转轴
4、定义初始位置
5、定义动画规则，进行旋转

代码如下：
js：

import React from 'react'
import styles from '../css/gundong.scss'

export default class Gundong extends React.Component{

    render(){
        return <div className={styles.main}>
            <div className={styles.top}></div>
            <div className={styles.center}></div>
            <div className={styles.bottom}></div>         
        </div>
    }

}

css：

.main{
    width:100%;
    height:100%;
    position:relative;
    transform-style: preserve-3d;
}

.top{
    width:100%;
    height:100%;
    position:absolute;
    background-image:url("../image/1.jpg");
    background-size:100% 100%;
    transform:rotateX(120deg);
    transform-origin:left center 39px;
    animation:move1 10s linear;
    animation-iteration-count:infinite;
    animation-fill-mode:forwards
}
@keyframes move1{
    0%{transform:rotateX(120deg);}
    100%{transform:rotateX(480deg);}
}


.center{
    width:100%;
    height:100%;
    position:absolute;
    background-image:url("../image/2.jpg");
    background-size:100% 100%;
    transform:rotateX(0deg);
    transform-origin:left center 39px;
    animation:move2 10s linear;
    animation-iteration-count:infinite;
    animation-fill-mode:forwards
}
@keyframes move2{
    0%{transform:rotateX(0deg);}
    100%{transform:rotateX(360deg);}
}

.bottom{
    width:100%;
    height:100%;
    position:absolute;
    background-image:url("../image/3.jpg");
    background-size:100% 100%;
    transform:rotateX(240deg);
    transform-origin:left center 39px;
    animation:move3 10s linear;
    animation-iteration-count:infinite;
    animation-fill-mode:forwards
}
@keyframes move3{
    0%{transform:rotateX(240deg);}
    100%{transform:rotateX(600deg);}
}