您现在的位置是:首页>学习分享
css3-3Dbanner图 2018-12-11 427

3Dbanner旋转

首先你得先构思出旋转体,一个正方体是六个面(因为这里不需要上下面,所以去掉,就只需要四个面),把正方体视为一个盒子模型(ul)

然后在盒子下面有4个子元素(li),通过定位分别形成四个面。

最后让ul盒子绕y轴旋转来过渡所看到得banner视图。

过程中需要注意得:

1、正方体盒子需要加上 transform-style: preserve-3d;是的其子元素以3d呈现

2、perspective 属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。(可加可不加。)

css:

    .banner{
        width400px;
        height250px;
        positionrelative;
        margin100px auto 0;
        perspective1200px;
    }
    .banner ul {
        positionrelative;
        width400px;
        height250px;
        transform-stylepreserve-3d;
        transitionall 0.5s;
        transform-origin50% 50%;
        animation: rotY 5s ease-in-out infinite;
    }
    .banner ul li {
        list-stylenone;
        width400px;
        height250px;
        positionabsolute;
        left0;
        top0;
    }
    .banner ul li img {
        width100%;
        height100%;
    }
    @keyframes rotY {
        0%{ transformrotateY(0) }
        100%{ transformrotateY(360deg) }
    }
html:
    <div class="banner">
        <ul>
            <li style="transform: translateZ(-200px)">
                <img src="http://www.zhangqinblog.com/templates/Images/news1.jpg"/>
            </li>
            <li style="transform:translateX(-50%) rotateY(90deg);">
                <img src="http://www.zhangqinblog.com/templates/Images/banner2.jpg"/>
            </li>
            <li style="transform: translateX(50%) rotateY(90deg);">
                <img src="http://www.zhangqinblog.com/files/learnShare/images/2019-8-28-2.jpg"/>
            </li>
            <li style="transform: translateZ(200px)">
                <img src="http://www.zhangqinblog.com/files/learnShare/images/2019-9-9.png"/>
            </li>
        </ul>
    </div>

查看演示

文章评论
关注我们
  • 微信公众号
  • 我的微信

站点声明:

1、本网站文章部分出自互联网,如无意中侵犯了某个媒体或个人的知识产权,请来信(987354940@qq.com)告之,本网站将立即删除。

Copyright © www.zhangqingblog.com All Rights Reserved. 备案号:鄂ICP备18005731号-2