CSS3的2D转换

于 2023-02-04 16:13:32 发布
阅读量251 收藏
点赞数
分类专栏： CSS 文章标签： 前端 html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_47896523/article/details/128876810
版权
本文介绍了服务器的基本概念，包括Web服务器的角色和功能。同时，详细讲解了CSS的2D转换，如如何实现盒子的水平和垂直居中、旋转、创建三角形、设置转换中心点以及缩放方法。通过实例代码展示了各种转换效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

什么是服务器

域名

CSS的2D转换

 1.盒子实现水平和垂直居中

2.CSS的2D旋转

3.CSS3三角

4.2D转换设置转换中心点

5.2D转换之缩放scale

6.2D转换综合写法

什么是服务器

服务器是提供计算服务的设备，它也是一台计算机，在网络环境下，服务器又分为文件服务器、数据库服务器、应用程序服务器、Web服务器

Web服务器一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以向浏览器等Web客户端提供文档，也可以放置网站文件，让全世界浏览；可以放置数据文件，让全世界下载

域名

www.mi.com

CSS的2D转换

translate不会影响到其他元素的位置

<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>
        /* 移动盒子的位置：定位、盒子的外边距、2D转换移动 */
        div {
            width: 200px;
            height: 200px;
            /* background-color: pink; */
            /* x就是x轴上移动位置，y就是y轴上移动位置,中间用,分割 */
            /* transform: translate(x, y); */
            /* transform: translate(100px, 100px); */
            /* 如果只移动X坐标 */
            /* transform: translate(100px, 0); */
            /* transform: translateX(100px); */
            /* transform: translateY(100px); */
        }

        div:first-child {
            background-color: pink;
            transform: translateY(100px);
        }

        div:last-child {
            background-color: purple;
        }
    </style>
</head>

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

 1.盒子实现水平和垂直居中

<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>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
            /* 移动的是自身宽度或者高度的50% */
            /* transform: translateX(50%); */
        }

        p {
            /* 绝对定位的方式实现div盒子内水平垂直居中 */
            position: absolute;
            top: 50%;
            left: 50%;
            width: 150px;
            height: 150px;
            background-color: blue;
            /* 之前定位的太过了，所以要再往回走一点 */
            /* margin-top: -75px; */
            /* margin-left: -75px; */

            /* 盒子往上走自己高度的一半，往左走自己宽度的一半 */
            transform: translate(-50%, -50%);
        }

        span {
            /* translate对于行内元素是无效的 */
            transform: translate(300px, 300px);
        }
    </style>
</head>

<body>
    <div>
        <p></p>
    </div>
    <span>123</span>
</body>

2.CSS的2D旋转

<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>
        img {
            width: 150px;
            /* 顺时针旋转45度 */
            /* transform: rotate(45deg); */
            border-radius: 50%;
            border: 5px solid pink;
            transition: all 1s;
        }

        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
    <img src="images/pink.jpg" alt="">
</body>

3.CSS3三角

<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>
        div {
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid #000;
        }

        div::after {
            content: '';
            position: absolute;
            top: 10px;
            right: 15px;
            width: 8px;
            height: 8px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(45deg);
            transition: all .6s;
        }

        /* 鼠标经过div里面的三角旋转 */
        div:hover::after {
            transform: rotate(225deg);
        }
    </style>
</head>

4.2D转换设置转换中心点

<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>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transition: all 1s;
            /* 可以跟方位名词 */
            transform-origin: left bottom;
            /* 2.默认的是50% 50% 等价于center center */

            /* 3.可以是px 像素 */
            transform-origin: 50px 50px;
        }

        div:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<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>旋转中心点案例2</title>
    <style>
        div {
            /* 溢出隐藏 */
            overflow: hidden;
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            margin: 10px;
            float: left;
        }

        div::before {
            /* 在指定的元素内容之前或者之后插入一个包含content属性指定内容的行内元素 */
            content: '黑马';
            /* before伪元素为行内元素 */
            display: block;
            width: 100%;
            height: 100%;
            background-color: blue;
            transform: rotate(180deg);
            transform-origin: left bottom;
            transition: all .7s;
        }

        /* 鼠标经过div 里面的before复原 */
        div:hover::before {
            transform: rotate(0deg);
        }
    </style>
</head>

5.2D转换之缩放scale

如果在原位置缩放，整个大小不改变的话，可以使用overflow:hidden

<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>2D转换之缩放</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 400px auto;
            transition: all .3s;
            transform-origin: left bottom;
            /* 如果以左下角为基点，则盒子会向右上延伸 */
        }

        div:hover {
            /* 里面的数字不带单位，就是倍数的意思 */
            /* 修改了宽度为原来的2倍，高度为原来的1倍 */
            /* transform: scale(2, 1); */
            /* 高度和宽度都等比例缩放，高度默认和第一个参数是一样的 */
            transform: scale(2);
            /* scale的优势:不会影响其他的盒子，尤其是下边的盒子,不会影响其他的盒子并且可以设置缩放的中心点 */
        }
    </style>
</head>

6.2D转换综合写法

 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值