正反两面的盒子内容切换旋转 js原生动画效果

最新推荐文章于 2022-12-06 11:50:57 发布

who_become_gods

最新推荐文章于 2022-12-06 11:50:57 发布

阅读量565

点赞数 1

文章标签： css javascript html

本文链接：https://blog.csdn.net/who_become_gods/article/details/104498144

版权

本文介绍一种使用JavaScript实现的盒子内容切换效果，通过盒子的正反两面旋转实现内容的动态过渡，提供了一种富有创意的交互体验。

摘要由CSDN通过智能技术生成

正反两面的盒子内容切换旋转

<!doctype html>
<html ng-app="invoice2">

<head>
    <style>
        * {
   
            padding: 0;
            margin: 0;
        }

        ul,
        li {
   
            list-style: none;
        }

        .ul {
   
            margin-top: 100px;
            margin-left: 200px;
        }
        .back {
   
            background: #fff;
            width: 182px;
            height: 81px;
            transform: rotateY(180deg);
            transition: all 1s;
            text-align: center;
            opacity: 0;
            margin-top: -103px;
            margin-bottom: 22px;
            box-shadow: 0px 2px 11px 0px rgba(0, 0, 0