HTML入门（2D变形与完全居中）————DAY6

最新推荐文章于 2022-07-19 14:09:56 发布

好吃的都给你呀

最新推荐文章于 2022-07-19 14:09:56 发布

阅读量167

点赞数

分类专栏：前端杂文文章标签： HTML 变形 2D 居中

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_39565202/article/details/102613549

版权

前端杂文专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>变形</title>
    <style>
        #d1{
            width: 100px;
            height: 100px;
            background-color: hotpink;
        }
        #d1:hover{
            transform: rotate(30deg);

            /* 设置变形原点，进行变形时，以这个点为基准点。默认为50% 50% */
            transform-origin: 100% 0%;
        }

        #d2{
            width: 100px;
            height: 100px;
            background-color: indigo;
        }

        #d2:hover{
            /* translate:平移变形，两个参数分别为横向偏移量和纵向偏移量 */
            /* 偏移量也可以是百分比，表示自身尺寸的百分之多少 */
            transform: translate(30px,40px);
            transition: transform 2s linear;
        }

        #d3{
            width: 100px;
            height: 100px;
            background-color: khaki;
            /* transition 设置过度效果 时长，名称，延时，效果 */
            /* 参考链接：https://www.w3school.com.cn/cssref/pr_transition.asp */
            transition: all 3s;
        }

        #d3:hover{
            transform: scale(1.4,1.4);
            /* 时间已经设置过了在上面 */
            transform-origin: 0% 0%;
        }

        /* 不用考虑像素 的 百分百居中 */
        #s1{
            width: 200px;
            height: 200px;
            border: solid 2px pink;
            /* relative和absolute的差别：relative是相对的，不脱离文档流，absolute是绝对的 脱离文档流
            相当于往上面提了一个图层，之前的那一块可以被新元素占用 */
            position:relative;
        }
        #d4{
            width: 50px;
            height: 50px;
            border: solid 1px red;
            /* 这里定位是距离之前的基准点的定位，所以进行50% 50%时，效果会是以左上角那个点
            在中心位置， */
            position: absolute;
            left: 50%;
            top: 50%;
            /* 这里移动的是自身的50% 50%，刚好把自身的中心点放到了父元素的中心点。 */
            transform: translate(-50%,-50%);
        }

    </style>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3">缩放变形</div>

    <section id="s1">
        <div id="d4"></div>
    </section>
</body>
</html>

好吃的都给你呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML入门（2D变形与完全居中）————DAY6

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫

专栏目录