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

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

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


<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>1li>
            <li>2li>
            <li>3li>
            <li>4li>
            <li>5li>
            <li>6li>
        ul>
        div>
    body>
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>

你可能感兴趣的:(CSS3动画)