利用CSS 3的3D属性及动画属性实现旋转相册

直接发车

 

我们首先创建一个最外层容器, id名字自定义,我们这里设置的是 div id=”main”

容器里面我们用列表添加全部图片

<body>

    <div id="main">

        <ul>

            <li><img src="./img/123.png" ></li>

            <li><img src="./img/123.png" ></li>

            <li><img src="./img/123.png" ></li>

            <li><img src="./img/123.png" ></li>

            <li><img src="./img/123.png" ></li>

            <li><img src="./img/123.png" ></li>

        </ul>

    </div>

</body>

 

1.接下来我们写CSS属性,首先我们简单的去除一下默认样式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        *{ margin:0; padding:0;}

        ul{ list-style: none;}

        img{ display: block;}

2.创建一个最外层容器div id=“main”  id里面的名字可以自定义

我们给最外层容器先添加宽高,参考边框,整体居中,景深,和景深基点位置top

宽高自己根据情况设置,

Perspective这个属性离屏幕多远的距离去观察元素,值越大幅度越小。

perspective-origin: 景深-基点位置,观察元素的角度。

                    值:top bottom left right

 

#main{border: 1px black solid; margin: 0 auto;width: 500px; height: 300px; perspective: 1000px; perspective-origin: top;}

 

3. 给外层容器里面的列表添加宽高,定位,和animation动画效果时间,重复次数,动画name,3D效果

Position:relative 相对定位

Animation:这里写的是复合写法 ;

10s指的是动画运动时间

Linear指的是动画运动形式(匀速)

  Infinite指的是运动次数(无限次数)

  Move没有具体含义,这是只是这个逐帧动画运动的名字,名字可以自定义。

  Transform-style:preserve-3d 指的是产生一个3d空间(只要是立体的效果就必须添加这个属性)

#main ul {width: 340px; height: 240px; position: relative; left: 50%; top: 0; margin-left:-170px ; animation: 10s linear infinite move; transform-style: preserve-3d;}

4.我们给第三条的属性设置一个逐帧动画

  逐帧动画:会把整个运动过程,划分成100份。0%-100%

Move就是上面我们给这个逐帧动画起的一个名字

  Transform:rotateY()绕Y轴旋转多少度 单位是deg

 

@keyframes move {

            0%{transform: rotateY(0);}

            100%{transform: rotateY(360deg);}

 4.给列表里面的子元素添加定位(定位在刚刚我们设置的容器里面的具体位置)

   然后我们给列表的每一个子元素设置具体旋转的角度和位移位置

   TranslateZ()在Z轴位移的数值,如果不添加的话就会全部聚集在中心,达不到我们想要的效果。

 

#main ul li{position: absolute; left: 0; top: 100px;}

 

        #main ul li:nth-of-type(1){transform: rotateY(0deg) translateZ(300px);}

        #main ul li:nth-of-type(2){transform: rotateY(60deg) translateZ(300px);}

        #main ul li:nth-of-type(3){transform: rotateY(120deg) translateZ(300px);}

        #main ul li:nth-of-type(4){transform: rotateY(180deg) translateZ(300px);}

        #main ul li:nth-of-type(5){transform: rotateY(240deg) translateZ(300px);}

        #main ul li:nth-of-type(6){transform: rotateY(300deg) translateZ(300px);}

5. 最后当鼠标放到整个容器上面时出现整体旋转360°效果

 

#main:hover ul {transform: rotateY(360deg);}

 

 

最终效果图:

 利用CSS 3的3D属性及动画属性实现旋转相册

                                                                                                 

                                                                                                  逆战班202

相关推荐