应用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

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

上一篇：怎样运用手机微信做为互动交流营销推广的服务 返回下一篇：没有了