实现翻页效果

ิっ淺

已于 2023-04-02 22:38:37 修改

阅读量162

点赞数 1

分类专栏： css 文章标签： css css3 html

于 2023-04-02 22:24:24 首次发布

本文链接：https://blog.csdn.net/weixin_49054076/article/details/129918026

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

该文章介绍了如何利用CSS3的2D转换功能创建翻页效果，主要涉及transform属性的rotate方法，通过设置不同的旋转角度和旋转中心点（transform-origin）来实现翻转。在鼠标悬停时添加过渡效果，使得翻页更加平滑。示例代码中展示了在盒模型上应用此技术的具体实现。

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

如何使用CSS3 2D转换实现翻页效果

实现翻页效果，我是使用CSS3 2D转换transforms允许移动、旋转、缩放和倾斜元素。

实现翻页效果

在这里插入图片描述

实现翻页效果的主要步骤主要是通过transform:rotate(-180deg)设置旋转的角度，鼠标经过transform:rotate(0deg)旋转回去，然后再设置旋转的中心点的位置，默认是center，这里我们设置旋转的中心点的位置为右下角transform-origin:right bottom；最后再将盒子溢出的部分隐藏overflow:hidden;

 <style>
        /* 翻页效果 */
        .box p {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 20px;
            /*溢出隐藏*/
            overflow: hidden; 
            float: left;
        }

          /*使用伪元素选择器*/
        .box p::before {
            content: "美食";
            display: block;
            color: #fff;
            font-size: 24px;
            text-align: center;
            width: 200px;
            height: 200px;
            background-color: aqua;

            transform: rotate(-180deg);
            /* 改变旋转中心点 */
            transform-origin: right bottom;
            /*设置过渡效果，规则是谁做过渡给谁加*/
            transition: all 0.5s;
        }
        p:hover::before {
            transform: rotate(0deg);
        }
</style>
<body>
	<div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
</body>