应用CSS3完成1个三d相册实际效果案例

日期:2021-01-20 类型:科技新闻 

关键词:h5互动游戏,微信h5怎么制作,h5转盘抽奖,h5测试制作,凡科H5

第1篇关键列出了1些常见或經典的CSS3技能和方式;第2篇是1个用CSS3完成的立方体案例,详尽解读了三d转动和transform等特性。

本文再来运用CSS3特性来撰写1个案例,话很少说,先立即看看实际效果。

由于前面早已解读过1些特性的用法,此篇文章内容已不赘述,只纪录这个案例的编号全过程。新项目编码最最终。

合理布局

立即看html合理布局:

    <div class="my-container">  <!-- 大器皿 -->
        <div class="photo-wrap">  <!-- 舞台 -->
            <div class="container">   <!-- 相册器皿 -->
                <div class="img img01"></div>
                <div class="img img02"></div>
                <div class="img img03"></div>
                <div class="img img04"></div>
                <div class="img img05"></div>
                <div class="img img06"></div>
                <div class="img img07"></div>
                <div class="img img08"></div>
                <div class="img img09"></div>
            </div>
        </div>
    </div>

款式

大器皿

最外层的大器皿依据具体状况界定款式便可。

    .my-container {        
        width: 800px;
        height: 500px;
        margin: 20px auto;
    }

舞台元素

perspective特性用来激活1个三d室内空间,使其子元素都会得到透視实际效果(应用了三d转换的元素,此案例中也便是相册器皿元素)。

    .photo-wrap {
        perspective: 800px;
        width: 800px;
    }

相册器皿

相册器皿的transform-style: preserve⑶d;款式,表明全部子元素在三d室内空间中展现。

    .container {
        width: 800px;
        height: 500px;
        margin: 0 auto;
        position: relative;
        transform-style: preserve⑶d;
    }

单独元素

    .img {
        width: 200px;
        height: 118px;
        line-height: 118px;
        text-align: center;
        position: absolute;
        top: 160px;
        left: 300px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.9) inset;
        background: pink;
    }

如今访问器看看实际效果:

右上图能够看出,如今每张照片都固定不动在同1个部位。很显著并不是大家要想的实际效果。可是要想做到大家预期的实际效果,要如何更改呢?

如今这些照片都在器皿的最管理中心点以平面的方式呈现的,要想产生1个圆形,就要用到转动特性(由于要绕着Y轴转动,因此是rotateY)了。

这里1共有9张图,因此按360/9=40度为企业来各自对每张图开展转动。

    .img01 {
        transform: rotateY(0deg);
    }
    .img02 {
        transform: rotateY(40deg);
    }
    .img03 {
        transform: rotateY(80deg);
    }
    .img04 {
        transform: rotateY(120deg);
    }
    .img05 {
        transform: rotateY(160deg);
    }
    .img06 {
        transform: rotateY(200deg);
    }
    .img07 {
        transform: rotateY(240deg);
    }
    .img08 {
        transform: rotateY(280deg);
    }
    .img09 {
        transform: rotateY(320deg);
    }

提升转动以后,再看看实际效果:

 

大家发现这些照片不在1个平面了,可是都挤在了1起,大家试着把每张照片都向自身的正前方(translateZ)挪动300像素,看看会产生甚么。

    .img01 {
        transform: rotateY(0deg) translateZ(300px);
    }
    .img02 {
        transform: rotateY(40deg) translateZ(300px);
    }
    .img03 {
        transform: rotateY(80deg) translateZ(300px);
    }
    .img04 {
        transform: rotateY(120deg) translateZ(300px);
    }
    .img05 {
        transform: rotateY(160deg) translateZ(300px);
    }
    .img06 {
        transform: rotateY(200deg) translateZ(300px);
    }
    .img07 {
        transform: rotateY(240deg) translateZ(300px);
    }
    .img08 {
        transform: rotateY(280deg) translateZ(300px);
    }
    .img09 {
        transform: rotateY(320deg) translateZ(300px);
    }

 提升转动和挪动以后的实际效果:

 至此,就早已做到大家预期的实际效果了。把每一个照片标识再加喜爱的相片,就OK啦!

动漫

要想让这个相册动起来,加1个动漫就行了。

    @keyframes rotateY360 {
        from {
            transform: rotateY(0deg);
        }
        to {
            transform: rotateY(360deg);
        }
    }

随后给"相册器皿"container元素加上动漫特性:

 animation: rotateY360 15s ease-in-out infinite;

最后,大获全胜:

源代码免费下载详细地址:demo

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。