长方体3D轮播图（CSS3实现）

作者: ForeverYoung20 | 来源:发表于2017-03-02 18:36 被阅读886次

长方体3D轮播图（CSS3实现）
[iOS]定制性强的广告轮播图--SCAdView
Recyclerview基本使用<8>-----用R
vue-awesome-swiper实现3d轮播图
纯css3：radio+label实现轮播图
用四种方法实现轮播图
3D立方体
Android超简单的3D旋转效果--图片轮播式
轮播图心得
用CSS3制作3D图片环

效果图：

1.png

2.png

注意点：

为了保证各个界面的字都是正立的，应先旋转再平移。
如果不使用背景色，使用图片时一定要设置图片的宽高，否则图片间有间隙。
近大远小的效果是在旋转的元素的父元素加 perspective: 500px;
展示3D效果是在旋转元素的css中加transform-style: preserve-3d;
可以如该种方法先画出正方体，再拉伸为长方体；也可以设置宽高时直接设为长方形。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
            margin: 150px auto;
            perspective: 500px;
        }
        ul{
            width: 200px;
            height: 200px;
            box-sizing: border-box;
            position: relative;
            transform-style: preserve-3d;
            animation:move 4s linear 0s infinite normal;
        }
        @keyframes move {
            from{
                transform: rotateX(0deg);
            }
            to{
                transform: rotateX(360deg);
            }
        }
        ul li{
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            font-size: 28px;
            list-style: none;
            position: absolute;
            top: 0;
            left: 0;
        }
        ul li:nth-child(1){
            background: red;
            transform:rotateX(90deg) translateZ(100px) scale(2,1);
        }
        ul li:nth-child(2){
            background: green;
            transform: rotateX(180deg) translateZ(100px) scale(2,1);
        }
        ul li:nth-child(3){
            background: blue;
            transform: rotateX(270deg) translateZ(100px) scale(2,1);
        }
        ul li:nth-child(4){
            background: yellow;
            transform:  rotateX(360deg) translateZ(100px) scale(2,1);
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
</body>
</html>