CSS3 中3D转换--旋转正方体，滚动照片墙的写法

最新推荐文章于 2022-12-26 17:09:37 发布

相约在一年四季

最新推荐文章于 2022-12-26 17:09:37 发布

阅读量3.6k

点赞数 2

分类专栏： CSS3动画文章标签： 3D转换 css3动画旋转立方体滚动照片墙CSS3 HTML CSS 3D动画

本文链接：https://blog.csdn.net/D321xiaoding/article/details/81747584

版权

CSS3动画专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先给父元素加两个属性，把父元素变成3D空间。
(1)transform-style:preserve-3d; （观察的场所 3D空间）
(2)perspective:1000px;（近大远小–景深prespective，元素距离观察点的距离也就是物体和眼睛的距离，通常在900-1200之间。）

然后利用3D转换的属性
transform

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>立方体</title>
        <style type="text/css">
            *{margin:0;padding:0;}
            li{list-style:none;}
            a{text-decoration:none;}
            @keyframes move{
                0%{transform: rotatey(0deg);}
                10%{transform: rotate(36deg);}
                20%{transform: rotatey(72deg);}
                30%{transform: rotate(108deg);}
                40%{transform: rotatey(144deg);}
                50%{transform: rotate(180deg);}
                60%{transform: rotate(216deg);}
                70%{transform: rotatey(252deg);}
                80%{transform: rotate(288deg);}
                90%{transform: rotatey(324deg);}
                100%{transform: rotate(360deg);}    
            }
            /*以上动画效果是旋转，至于如何旋转可以自己设计，你可以自己设计一个炫酷的效果*/
            .box{width:300px;height:300px;transform-style: preserve-3d;perspective: 1000px;margin: 50px auto;}
            ul{width:200px;height:200px;position: relative;transform-style: preserve-3d;margin: 50px auto;animation:move 15s linear infinite ;}
            ul li{width:200px;height:200px;background: #f00;position: absolute;top:0;left: 0;}
            /*以下为重点内容，重点在于每个面是如何进行转换的*/
            ul li:first-child{background: #f00;transform: translateZ(100px);}
/*将第一个面沿Z轴正方向（一般不沿着Z轴的负方向平移）（在正常情况下，Z轴永远朝着自己）平移100px，也就是向前平移100px，此面为面向自己的面*/
            ul li:last-child{background: #00f;transform:rotateY(180deg) translateZ(100px);}
/*将最后一个面旋转180度，然后Z轴就反过来了（在正常情况下，Z轴永远朝着自己）而现在Z轴反过来，Z轴就背对着自己，也就是向后平移100px，此面为后面的面*/
            ul li:nth-child(2){background:#ff0;transform:rotateY(90deg) translateZ(100px);}
/*将第二个面沿Y轴旋转90度，旋转后z轴方向向左，然后再沿Z轴正方向平移100px,此面是左边的面，*/
            ul li:nth-child(3){background: #0f0;transform:rotateY(-90deg) translateZ(100px);}}
/*同理，将第三个面沿Y轴旋转-90度，旋转后z轴方向向右，然后再沿Z轴正方向平移100px,此面是右边的面，*/
            ul li:nth-child(4){background: #f0f;transform:rotateX(90deg) translateZ(100px);}}
/*将第四个面沿X轴旋转90度，旋转后z轴方向向下，然后再沿Z轴正方向平移100px,此面是下边的面，*/
            ul li:nth-child(5){background: #0ff;transform:rotatex(-90deg) translateZ(100px);}
/*将第五个面沿X轴旋转-90度，旋转后z轴方向向上，然后再沿Z轴正方向平移100px,此面是上边的面，*/
        </style>
    </head>
    <body>
        <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
        </div>
    </body>
</html>

下面是滚动照片墙案例；
原理相同先旋转角度后再平移。
以下是源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            li{list-style: none;}
            a{text-decoration: none;}
            img{display: block; border:0;}
            @keyframes move{
                0%{transform: rotateY(0deg);}
                10%{transform: rotateY(36deg);}
                20%{transform: rotateY(72deg);}
                30%{transform: rotateY(108deg);}
                40%{transform: rotateY(144deg);}
                50%{transform: rotateY(180deg);}
                60%{transform: rotateY(216deg);}
                70%{transform: rotateY(252deg);}
                80%{transform: rotateY(288deg);}
                90%{transform: rotateY(324deg);}
                100%{transform: rotateY(360deg);}   
            }

            .box{width: 300px;height:300px;transform-style: preserve-3d; perspective: 1000px;margin:100px auto;}
            ul{width:200px;height:200px;position: relative;transform-style: preserve-3d;margin:100px auto;animation: move 20s linear infinite;transform: rotateX(30deg);}
            ul li{width:100px;height:200px;overflow: hidden;position: absolute;top:0;left: 0; overflow: hidden;transition: 1s all ease;}
            ul li img{width:100px;height:200px;}
            ul li:hover img{width:120px;height:220px;}
            ul li img{width:100px;height:200px;}

            ul li:nth-child(1){transform: rotateY(30deg) translateZ(200px);}
            ul li:nth-child(2){transform: rotateY(60deg) translateZ(200px);}
            ul li:nth-child(3){transform: rotateY(90deg) translateZ(200px);}
            ul li:nth-child(4){transform: rotateY(120deg) translateZ(200px);}
            ul li:nth-child(5){transform: rotateY(150deg) translateZ(200px);}
            ul li:nth-child(6){transform: rotateY(180deg) translateZ(200px);}
            ul li:nth-child(7){transform: rotateY(210deg) translateZ(200px);}
            ul li:nth-child(8){transform: rotateY(240deg) translateZ(200px);}
            ul li:nth-child(9){transform: rotateY(270deg) translateZ(200px);}
            ul li:nth-child(10){transform: rotateY(300deg) translateZ(200px);}
            ul li:nth-child(11){transform: rotateY(330deg) translateZ(200px);}
            ul li:nth-child(12){transform: rotateY(0deg) translateZ(200px);}    
        </style>
    </head>
    <body>
        <div class="box">
            <ul>
                <li><a href="#"><img src="img/hai.png"/></a></li>
                <li><a href="#"><img src="img/hai.png"/></a></li>
                <li><a href="#"><img src="img/hai.png"/></a></li>
                <li><a href="#"><img src="img/hai.png"/></a></li>
                <li><a href="#"><img src="img/hai.png"/></a></li>
                <li><a href="#"><img src="img/hai.png"/></a></li>
                <li><a href="#"><img src="img/hai.png"/></a></li>
                <li><a href="#"><img src="img/hai.png"/></a></li>
                <li><a href="#"><img src="img/hai.png"/></a></li>
                <li><a href="#"><img src="img/hai.png"/></a></li>
                <li><a href="#"><img src="img/hai.png"/></a></li>
                <li><a href="#"><img src="img/hai.png"/></a></li>
            </ul>
        </div>
    </body>
</html>

相约在一年四季

关注

2
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
CSS3 中3D转换--旋转正方体，滚动照片墙的写法

首先给父元素加两个属性，把父元素变成3D空间。 (1)transform-style:preserve-3d; （观察的场所 3D空间） (2)perspective:1000px;（近大远小–景深prespective，元素距离观察点的距离也就是物体和眼睛的距离，通常在900-1200之间。）然后利用3D转换的属性 transform&amp;lt;!DOCTYPE html&amp;gt...
复制链接

扫一扫