CSS3 2D转换rotate 旋转案例

最新推荐文章于 2023-08-05 22:23:09 发布

米咪米

最新推荐文章于 2023-08-05 22:23:09 发布

阅读量196

点赞数

分类专栏： CSS 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_52063946/article/details/119878248

版权

CSS 专栏收录该内容

9 篇文章 2 订阅

订阅专栏

1、问题描述：

当鼠标经过div时，用另一个盒子覆盖，并且添加过渡效果

触发前：

鼠标经过盒子后：

2、核心思路：

给定一个盒子1，设置宽高，
利用伪元素 ::before，添加另一个盒子2（因为伪元素是行内元素，不能设置宽高，所以我们设置display:block）
设置盒子2的旋转中心为左下角，并旋转180°
当鼠标经过盒子1时，盒子2旋转0°
给盒子2添加过渡效果

3、实现代码：

<!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>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            margin: 100px auto;
            overflow: hidden;
        }
        
        .box::before {
            /* 伪元素是行内元素 */
            display: block;
            content: "你好";
            width: 200px;
            height: 200px;
            background-color: pink;
            transform-origin: left bottom;
            transform: rotate(180deg);
            transition: all 1s;
        }
        
        .box:hover::before {
            transform: rotate(0deg);
        }
    </style>
</head>

<body>
    <div class="box">

    </div>

</body>

</html>

米咪米

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 2D转换rotate 旋转案例

1、问题描述：当鼠标经过div时，用另一个盒子覆盖，并且添加过渡效果触发前：鼠标经过盒子后：2、核心思路：给定一个盒子1，设置宽高，利用伪元素 ::before，添加另一个盒子2（因为伪元素是行内元素，不能设置宽高，所以我们设置display:block）设置盒子2的旋转中心为左下角，并旋转180° 当鼠标经过盒子1时，盒子2旋转0° 给盒子2添加过渡效果3、实现代码：<!DOCTYPE html><html lang="en">..
复制链接

扫一扫