首页 > 其他分享> 文章详细

CSS 转换

2021-07-06 17:06:04 阅读：227 来源： 互联网

标签：scale 转换缩放 transform height div translate CSS

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; 参数可以是百分比、像素或者方位名词
复合写法中，同时有位移和其他属性时，位移应移动至最前面

标签：scale,转换,缩放,transform,height,div,translate,CSS
来源： https://blog.csdn.net/weixin_41909678/article/details/118494831

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS 转换

2D 转换

二维系坐标

移动 translate

实例

让一个盒子水平垂直居中

旋转 rotate

三角形

设置旋转中心点 transform-origin

缩放 scale

图片放大实例

分页按钮

2D 转换复合写法

2D 转换总结