2D效果之转换

最新推荐文章于 2022-09-13 18:41:29 发布

邻家的疯丫头

最新推荐文章于 2022-09-13 18:41:29 发布

阅读量252

点赞数

分类专栏：前端笔记

本文链接：https://blog.csdn.net/qq_45495031/article/details/105979180

版权

笔记同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端

4 篇文章 3 订阅

订阅专栏

2D效果之转换

题目要求：页面只有一个盒子，要求鼠标经过盒子，弹出带有“你好！”字样的盒子

1、概念

2D转换就是改变图形在二维坐标上的位置和形状，在这个小案例中我们主要介绍图形在二维坐标上位置的变化（以旋转为主）

注意：前端学习中的二维坐标与数学中的二维坐标有所不同，前端中的二维坐标如下：
在这里插入图片描述

2、涉及的知识点

旋转主要涉及到的是旋转中心和旋转角度的问题。
旋转角度用 transform: rotate(xdeg);来设置，下面表示旋转180度

 transform: rotate(180deg);

旋转中心用transform-origin:来设置，默认旋转中心为图形中心，下面表示以左下角为旋转中心

 transform-origin: left bottom;

3、代码实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2D效果之旋转</title>
    <style>
        div {
            /* 隐藏before，鼠标点击时显示，给父盒子添加溢出隐藏 */
            overflow: hidden;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: rgb(218, 227, 230);
        }

        div::before {
            content: "你好！";
            /* 重点：伪元素选择器是行内元素，不能进行设置样式 ,把它转换成块内元素*/
            display: block;
            width: 100%;
            height: 100%;
            background-color: rgba(156, 200, 241, 0.877);
            transform: rotate(180deg);
            transform-origin: left bottom;
            /* 加上动画延时处理，使效果更好 */
            transition: all 0.4s;
        }

        /* 鼠标经过时恢复成原样 */
        div:hover::before {
            transform: rotate(0deg);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

注意：
1、利用伪元素选择器加入元素时，一定要带有content属性
2、伪元素选择器加入的元素是行内元素，要对其进行设置宽高的时候，一定要记得使用display把其转换称为块内元素
3、把加入的元素用溢出先隐藏起来，待鼠标经过时再显示
4、为了页面效果，给动画加上一个延时操作，看起来更舒服（具体在代码中有标出注解）

下面小编给你简单总结一下2D效果的综合写法！
2D效果转换有关的知识点一般围绕transform来展开，综合写法为：

transform: translate(150px, 150px) rotate(360deg) scale(1.1);

下面举个简单的例子相信大家就懂了。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2D效果综合写法</title>
    <style>
        div {
            width: 249px;
            height: 249px;
            background-color: pink;
            transition: all 0.5s;
        }

        div:hover {
            transform: translate(150px, 150px) rotate(360deg) scale(1.1);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

今天的内容到这就结束了，你学会了吗？赶紧动手制作出属于你的精美页面吧！

邻家的疯丫头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2D效果之转换

2D效果之转换题目要求：页面只有一个盒子，要求鼠标经过盒子，弹出带有“你好！”字样的盒子1、概念2D转换就是改变图形在二维坐标上的位置和形状，在这个小案例中我们主要介绍图形在二维坐标上位置的变化（以旋转为主）注意：前端学习中的二维坐标与数学中的二维坐标有所不同，前端中的二维坐标如下：2、涉及的知识点转换有关的知识点一般围绕transform来展开，居然以旋转为主进行展开，旋转主要涉及...
复制链接

扫一扫

专栏目录