CSS3实现翻转(Flip)效果

本文通过实例代码介绍了CSS3实现的3D翻转效果,包括左右3D翻转和上下3D翻转,直接复制代码即可应用于项目中。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <title>css3 翻转效果</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="telephone=no" name="format-detection"/>
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <style>
        *{
            box-sizing: border-box;
        }
        body{
            margin: 0;
        }

        .container{-webkit-perspective:1000;transform-style:preserve-3d;}
        .container,.front,.back{width:380px;height:270px;}
        .flip{position:relative;transition:0.6s;transform-style:preserve-3d;}
        .front,.back{position:absolute;top: 0px;left: 0px;backface-visibility:hidden;}
        .front{ background-color: rgb(255,192,203);z-index:2;}
        .back{ background-color: yellow;transform:rotateY(-180deg);}
        .container:hover .flip{transform:rotateY(180deg);}


        .box{
            -webkit-perspective: 1000;
            transform-style: preserve-3d;
        }
        .t,.t1,.t2{
            width: 300px;
            height: 300px;
        }

        .t{
            position: relative;
            transition: all 0.6s;
            transform-style: preserve-3d;
        }

        .t:hover{
            transform: rotateX(180deg);
        }

        .t1,.t2{
            position: absolute;
            backface-visibility: hidden;
        }

        .t1{
            background-color: red;
            z-index: 2;
        }

        .t2{
            background-color: #0000cc;
            transform: rotateX(-180deg);
        }
    </style>
</head>
<body>
<div class="container">
    <div class="flip">
        <div class="front">front</div>
        <div class="back">end</div>
    </div>
</div>

<div class="box">
    <div class="t">
        <div class="t1">t1</div>
        <div class="t2">t2</div>
    </div>
</div>



</body>
</html>

代码直接copy即可
第一个例子为左右3d左右翻转,第二个为3d上下翻转

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值