专栏首页天天css3转换(banner)

css3转换(banner)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .con{
            width: 400px;
            height: 220px;
            margin: 100px auto;
            /*border: 1px solid #eee;*/
            /*perspective: 2000px;*/
        }
        ul{
            list-style: none;
            height: 100%;
            width: 400px;
            position: relative;
            transform-style: preserve-3d;
            /*transform: rotateX(45deg) rotateY(45deg);*/
            transition: all 3s;
        }
        ul>li{
            position: absolute;
            height: 220px;
            width: 80px;
            transform-style: preserve-3d;
        }
       ul>li>div{
           height: 100%;
           width: 100%;
           position: absolute;
       }
        ul>li>div:nth-child(1){
            transform: translateZ(40px);
            background: url("img/1.jpg") no-repeat;
            background-size: cover;
        }
        ul>li>div:nth-child(2){
            transform: translateX(40px) rotateY(90deg);
            background: url("img/2.jpg") no-repeat;
            background-size: cover;
        }
        ul>li>div:nth-child(3){
            transform: translateZ(-40px) rotateY(180deg);
            background: url("img/3.jpg") no-repeat;
            background-size: cover;
        }
        ul>li>div:nth-child(4){
            transform: translateX(-40px) rotateY(270deg);
            background: url("img/4.jpg") no-repeat;
            background-size: cover;
        }

    </style>
</head>
<body>
<div class="con">
    <ul id="ban">
        <li>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </li>
        <li>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </li>
        <li>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </li>
        <li>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </li>
        <li>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </li>

    </ul>
    <button id="btn">下一张</button>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $("#ban li").each(function(k,v){
           $(this).css({
               left:k*80+"px",
               transitionDelay:0.2*k+"s"
           });

            $(this).find("div").css({
                backgroundPositionX:-80*k+"px"
            })
    })




    var num=0;
    $("#btn").click(function(){
        num++;
        $("#ban li").css("transform","rotateY("+num*(90)+"deg)")

    })
</script>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 选择器与css的一些用法

    天天_哥
  • 切换

    天天_哥
  • vue中一些小坑(2)

    好久没写vue代码,时间长了不写都是会生疏或者有些地方会忽略,就像在项目刚开始就碰到了自己注册的header和footer不显示 其实这就是我们忽略了一些问题...

    天天_哥
  • HTML5选择器

    czjwarrior
  • HTML规范 - 整体结构

    申霖
  • jquery选择器

    jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择成功。

    Devops海洋的渔夫
  • 老雷PHP全栈开发教程之常用html标签

    老雷PHP全栈开发
  • flex 布局

    CSS3 为我们提供了一种可伸缩的灵活的 web 页面布局方式 flexbox 布局,它具有很强大的功能,可以很轻松实现很多复杂布局。可以简便、完整、响应式地实...

    Krry
  • CSS——实现元素的垂直居中

    在写CSS的过程中,我常常谷歌一个东西,就是如何实现元素的垂直居中,水平居中难度还不是很大,但是垂直居中我这个烂记性是写一次忘一次,于是本着好记性不如烂笔头的想...

    Originalee
  • [前端][css]float left布局换行不正常问题

    最近遇到一个页面布局上的问题,后来模拟了一下还原了下出现的原因。本来大概想实现的布局大概是这样的

    Tuzei

扫码关注云+社区

领取腾讯云代金券