CSS 转换

2023-12-17 11:10:03

2D 转换

二维系坐标

设置旋转中心点 transform-origin

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

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

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

2D 转换

2D 转换是改变标签在二维平面上的位置和形状的一种技术

二维系坐标

移动 translate

可以改变元素在页面中的位置，类似定位

transform: translate(x, y);
/*也可以分开写*/
/*单独移动 X 或 Y 也可以*/
transform: translateX(n);
transform: translateY(n);

重点

定义 2D 转换中的移动，沿着 X 和 Y 移动元素
translate 最大的优点：不会影响到其他元素的位置
translate 中的百分比单位是相对于自身元素的 translate:(50%,50%)；
对行内标签没有效果

div:first-child {
    /*移动并不会影响其他元素*/
    transform: translate(20px, 20px);
    background-color: #ff8500;
}
div:last-child {
    background-color: #00a4ff;
}

实例

    <body>
        <div>
            <img src="images/pic1.png" alt="">
        </div>
        <div>
            <img src="images/pic2.png" alt="">
        </div>
        <div>
            <img src="images/pic3.png" alt="">
        </div>
        <div>
            <img src="images/pic4.png" alt="">
        </div>
        <div>
            <img src="images/pic5.png" alt="">
        </div>
    </body>

div {
    /*translate 对行内元素无效*/
    display: inline-block;
}
div:hover {
    transform: translateY(-5px);
}

让一个盒子水平垂直居中

原理

div {
    width: 100px;
    height: 100px;
    background-color: #00a4ff;
    /*translate的取值可以是百分比，但此时移动距离的参照是盒子自身的宽高*/
    transform: translate(50%, 50%);
}

根据以上代码，我们可以推出：

当我们需要让盒子水平垂直居中时，我们可以不用再精确计算 margin-top 和 margin-left 的值。
而是直接使用 translate() ，并将其值设置为 50%。这50%的参照就是盒子本身的宽高

* {
    margin: 0;
    padding: 0;
}
.father {
    position: relative;
    width: 300px;
    height: 300px;
    background-color: #00a4ff;
}
.son {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    background-color: #ff8500;
    /*以前的做法*/
    /*margin-top: -50px;*/
    /*margin-left: -50px;*/
    /*使用transform中的translate*/
    /*这种方法可以有效地减少计算，提高效率*/
    transform: translate(-50%, -50%);
}

旋转 rotate

让元素在二维平面内顺时针旋转或逆时针旋转

transform: rotate('度数')

重点：

rotate 里面的单位是度数，单位是 deg；例如： rotate(45deg)
角度为正时，顺时针；角度为负时，逆时针
默认旋转的中心为元素的几何中心

div {
    width: 200px;
    height: 200px;
    background-color: #00a4ff;
    border: 2px solid black;
    border-right: 2px solid red;
    transition: all 1s;
}
div:hover {
    transform: rotate(180deg);
}

三角形

.box {
    position: relative;
    width: 250px;
    height: 30px;
    border: 1px solid black;
}
.box::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 18px;
    width: 10px;
    height: 10px;
    border: 1px solid black;
    border-top: transparent;
    border-left: transparent;
    transform: rotate(45deg);
    transition: all 1s;
}
/*光标移动到box上，箭头翻转*/
.box:hover::after {
    position: absolute;
    top: 13px;
    transform: rotate(225deg);
}

设置旋转中心点 transform-origin

transform-origin: x y;

重点：

注意参数值 x 和 y 应用空格隔开
x y 默认转换的中心点为元素的中心点（50%，50%）
也可以给 x 和 y 设置像素或者方位名词（top、bottom、left、right、center）

div {
    width: 200px;
    height: 200px;
    background-color: #00a4ff;
    margin: 100px auto;
    /*1.可以将值设置为方位名词*/
    /*transform-origin: left bottom;*/
    /*2.默认为 50% 50%,等同于 center center*/
    /*3.可以将值设置为像素*/
    transform-origin: 50px 50px;
}
div:hover {
    transform: rotate(125deg);
}

实例

div {
    display: inline-block;
    width: 150px;
    height: 150px;
    margin: 50px;
    background-color: #00a4ff;
    border: 1px solid black;
}
div::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: #ff8500;
    transform: rotate(90deg);
    transform-origin: left bottom;
    /*谁做动画给谁加*/
    transition: all 10s;
}
div:hover::after {
    transform: rotate(0deg);
}

缩放 scale

放大和缩小。控制元素的缩放

transform: scale(x,y);

注意

注意其中的 x 和 y 用逗号分隔
transform: scale(1,1)：宽和高都放大到一倍，相当于没有放大
transform: scale(2,2)：宽和高都放大到两倍
transform: scale(2)：只写一个参数。相当于 scale(2,2)
transform: scale(0.5,0.5)：缩小
scale 缩放最大的优势：可以设置缩放中心，默认以几何中心缩放。
不会影响其他盒子

div:hover {
    /*1.属性值是数字，没有单位*/
    /*2.属性值为n,即放大或缩小的结果为 盒子宽高*n */
    /*3.当属性值为1时，即盒子宽高*1.所以盒子并不会缩放*/
    transform: scale(2,2);
    transform: scale(2,1);
    transform-origin: center center /*默认，可不写*/
    transform: scale(2);
    /*当属性值小于1时，即可实现缩小效果*/
    transform: scale(0.5);
    transition: all 2s;
}

scale 的优点：

div{
    width: 100px;
    height: 100px;
    
}
div:hover{
    /*scale 缩放*/
    /*scale 的缩放以设置的中心为缩放参照*/
    /*scale 的缩放不会影响其他盒子*/
    transform-origin: left bottom;
    transform: scale(2,2);
    /*直接设置宽高进行缩放*/
    /*沿着左右两侧缩放宽，往下缩放高*/
    /*会影响其他盒子的位置*/
    width: 200px;
    height: 200px;
}

图片放大实例

.picture {
    /*隐藏放大后超出边框的部分*/
    overflow: hidden;
    float: left;
    width: 160px;
    height: 114px;
    margin: 10px;
}
.picture img {
    width: 100%;
    height: 100%;
    /*谁做过渡给谁加*/
    transition: all .4s;
}
.picture img:hover {
    transform: scale(1.3);
}

分页按钮

ul li {
    float: left;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin: 3px;
    border: 1px solid rgba(0,0,0,.3);
    border-radius: 50%;
    list-style: none;
    cursor: pointer;
    transition: all .4s;
}
ul li:hover {
    transform: scale(1.2);
}

2D 转换复合写法

注意：

同时使用多个转换，其格式为： transform: translate() rotate() scale() ......
其顺序会影响转换的效果（先旋转会改变坐标轴的方向）
当我们同时有位移和其他属性时，位移应移至最前面

2D 转换总结

转换 transform 即变形，有 2D 和 3D 之分
位移、旋转、缩放
2D 位移 translate(x,y) 最大的优势时不会影响其他的盒子；当括号中的参数为 % 时，基准为盒子自身的宽高
可以分开写：translateX(y) 和 translateY(y)
2D 旋转 rotate（度数）可以实现旋转元素，单位为 deg
2D 缩放 scale(x,y) 括号中的参数是数字，没有单位，可以是小数，都代表放大或缩小了 n 倍；最大的优势：不会影响其他的盒子
设置转换中心 transform-origin: x y; 参数可以是百分比、像素或者方位名词
复合写法中，同时有位移和其他属性时，位移应移动至最前面

码农公寓

2D 转换

二维系坐标

移动 translate

实例

让一个盒子水平垂直居中

旋转 rotate

三角形

设置旋转中心点 transform-origin

缩放 scale

图片放大实例

分页按钮

2D 转换复合写法

2D 转换总结

相关文章