HTML+CSS 制作翻牌效果[练习]

时间:2021-6-12 作者:qvyue

案例来源

本例来自CodingStartup的视频:HTML+CSS 制作翻牌效果

学到知识

  1. 使用backface-visibility:hidden属性,可以在翻转元素的时候隐藏背面,否则显示镜像的背面(注意兼容问题)。
  2. 可以使用position:absolute属性,重叠两个元素
  3. 使用perspective 设定立体的透视深度,此属性有两种设置方法:
    1. 设置在执行动作的元素transform属性内:transform: perspective(1000px) rotateY(180deg)
    2. (本例)设置在执行动作的元素的父元素,使用perspective: 1000px
  4. 在使用:hover伪类时,要尽量作用在执行动作的元素的父类,以免因为改变形状而影响效果的稳定。
  5. 分享渐变效果的网站:Gradient Hunt

主要代码

html


    
COVER
BACK
COVER
BACK
COVER
BACK

css


        html {
            font-size: 22px;
        }

        body {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            background-image: linear-gradient( 90.5deg,  rgba(255,207,139,0.50) 1.1%, rgba(255,207,139,1) 81.3% );
        }

        .container {
            width: 300px;
            height: 400px;
            position: relative;
            perspective: 1000px;
        }

        .cover, .back{
            width: 100%;
            height: 100%;
            position: absolute;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            transition: transform .25s ease-in-out;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 1.6rem;
            text-shadow: .1rem .2rem .1rem rgba(0,0,0,.2);
            border-radius: .4rem;
            box-shadow: .2rem .3rem .4rem rgba(0,0,0,.1);
        }

        .cover {
            transform: rotateY(0deg);
            background-image: radial-gradient( circle 465px at -15.1% -25%,  rgba(17,130,193,1) 0%, rgba(67,166,238,1) 49%, rgba(126,203,244,1) 90.2% );
        }

        .container:hover .cover {
            transform: rotateY(180deg);
        }

        .back {
            transform: rotateY(-180deg);
            background-image: radial-gradient( circle 1294px at -15.5% 23.8%,  rgba(255,206,149,1) 0%, rgba(247,92,92,1) 44.9%, rgba(108,0,96,0.97) 93.8% );
        }

        .container:hover .back{
            transform: rotateY(0deg);
        }
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。