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

YPE >

标签：效果   cti   absolute   单位   接下来   实现   tran   rspec   复合   

直接发车

 

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

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

    

        

            

            

            

            

            

            

        

    

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

html>

    

        *{ 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);}

最终效果图：

                                                                                                  逆战班202

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

标签：效果   cti   absolute   单位   接下来   实现   tran   rspec   复合   

原文地址：https://www.cnblogs.com/leiyuhang/p/12347284.html