使用rotate()来做一个3d贺卡

最新推荐文章于 2024-10-18 21:55:01 发布

品风 ₯ 未醉

最新推荐文章于 2024-10-18 21:55:01 发布

阅读量156

点赞数

分类专栏： js+html+css的小练习文章标签： 3d css css3

本文链接：https://blog.csdn.net/weixin_48342617/article/details/121035382

版权

js+html+css的小练习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

视频效果：

元旦贺卡

思路： 简单的讲一讲吧，好像也没什么好说的，首先就是要将盒子旋转一定的角度，然后结合透视和3d效果，使盒子呈现出一个立体的效果，注意透视和3d书写的位置，然后就是改变盒子的变形原点使其呈现出一个翻盖的效果

代码及细节：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元旦贺卡</title>
    <style>
        body{
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #7f8c8d;
        }

        /* 这里有一个细节，透视和3d效果一定要加在旋转的前面 */
        div{
            width: 200px;
            height: 100px;
            background-color: #e67e22;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            /* 添加透视使立体效果呈现出来 */
             transform: perspective(900px);
            /* 添加3d效果 */
            transform-style: preserve-3d;
            /* 将整个div旋转一下添加一些立体效果 */
            transform:  rotateX(25deg) rotateY(25deg);
        }
        /* 使用before与after作为翻盖 */
        div::after{
            content: "莞工";
            height: 100%;
            width: 50%;
            background-color: #c0392b;
            position: absolute;
            left: 0px;
            display: flex;
            justify-content:
            flex-end;
            align-items: center;
            border-right: 1px solid #e67e22;
            z-index: 10;
              /* 改变变形原点 */
            transform-origin: left;
            transition: 1s;
            color: white;

        }
        div::before{
            content: "杰仔";
            height: 100%;
            width: 50%;
            background-color: #c0392b;
            position: absolute;
            right: 0px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            transition: 1s;
            /* 改变变形原点 */
             transform-origin: right;
             color: white;
        }

        /* 为两个翻盖添加翻转效果 */
        div:hover::after{
            transform: rotateY(-180deg);
          
        }
        div:hover::before{
            transform: rotateY(180deg);
        }
        
    </style>
</head>
<body>
    <div>
        元旦贺卡
    </div>
</body>
</html>