4. 2D转换

最新推荐文章于 2024-09-06 11:00:54 发布

sun 马胖

最新推荐文章于 2024-09-06 11:00:54 发布

阅读量59

点赞数

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

本文链接：https://blog.csdn.net/m0_66349719/article/details/128472428

版权

css3 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

2D转换:

1. 转换（transform）的概念:

转换CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果:

转换（transform）你可以简单理解为变形

移动：translate
旋转：rotate
缩放：scale

二维坐标系 (水平右为正,垂直下为正):

在这里插入图片描述

2. 2D转换移动 translate:

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位:

    div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /*transform: translate(x,y) x,y的值可以写0但是不可以省略*/
            transform: translate(1000px,100px);
        }



    div {
               /*效果是一样的*/
            transform: translateX(1000px);
            transform: translateY(100px);
        }

重点:

定义 2D 转换中的移动，沿着 X 和 Y 轴移动元素
translate最大的优点：不会影响到其他元素的位置
translate中的百分比单位是相对于自身元素(自身的宽度和高度)的 translate:(50%,50%);

/*实现嵌套的盒子居中*/
<style>
   .div1 {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: aquamarine;
   }
   .div2 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background-color: red;
    transform: translate(-50%,-50%);
 }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
</body>

效果图:

在这里插入图片描述

对行内标签没有效果

3. 2D 转换之旋转 rotate:

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转:
/*单位是deg 度数的意思,可以是正可以是负数*/
transform:rotate(45deg)

案例:

在这里插入图片描述

/*原理正方形给两个边然后进行旋转*/
    div {
            width: 50px;
            height: 50px;
            border-top: 3px solid gray;
            border-right: 3px solid gray;
            margin-top: 100px;
            transform: rotate(45deg);
        
        }

效果图:
在这里插入图片描述

设置元素装换的中心点:

转换中心点 transform-origin:
```
/*默认的是 50%,50%    值可以是:方位名词<左上角 top left>,也可以是像素*/
transform-origin: x y;
```
重点:
- 注意后面的参数 x 和 y 用空格隔开
- x y 默认转换的中心点是元素的中心点 (50% 50%)
- 还可以给x y 设置像素或者方位名词（top bottom left right center）

4. 设置元素缩放:

缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。

transform:scale(x,y);

注意:

注意其中的x和y用逗号分隔
transform:scale(1,1) ：宽和高都放大一倍，相对于没有放大
transform:scale(2,2) ：宽和高都放大了2倍
transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
transform:scale(0.5,0.5)：缩小
sacle缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

`案例:分页按钮`

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        li {
            float: left;
            width: 50px;
            height: 50px;
            border: 1px solid gold;
            border-radius: 50%;
            text-align: center;
            line-height: 50px;
            margin:10px 10px;
            list-style-type: none;
        }
        a {
            color: #000;
            text-decoration: none;
            transition: all 0.3s;
        }
        li:hover {
            transform: scale(1.2);
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">6</a></li>

    </ul>