CSS3特性——2D转换

苠苠超可爱

已于 2022-12-12 21:33:02 修改

阅读量266

点赞数 1

分类专栏：前端课堂笔记文章标签：开发语言前端 html5 css3

于 2022-12-12 21:25:58 首次发布

本文链接：https://blog.csdn.net/weixin_55701027/article/details/128293289

版权

前端课堂笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

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

一、2D转换是什么？

转换简单理解为变形：

1、移动：translate

2、旋转：rotate

3、缩放：scale

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

二、如何运用2D转换

1.移动（translate）

语法：

transform: translate(x,y); 或者分开写

transform: translateX(n);

transform: translateY(n);

重点：

1.定义2D中的移动，沿着x和y轴移动元素

2.translate最大的优点：不会影响其他元素的位置

3.translate中的百分比单位是相对于自身元素位置的translate:(50%,50%);

4.对行内标签没有效果

注意：

translate里面的值是可以用百分数的

如果值是百分数，那么移动的距离就是盒子自身宽度或者高度的一半

CSS3代码如下：

<style>

.translate {

width: 200px;

height: 200px;

background-color: #333;

border-radius: 100px;

/* x就是x轴上移动位置 y就是y轴上移动位置 x 与 y中间用逗号隔开 */

/* transform: translate(x,y); */

/* transform: translate(100px,100px); */

/* transform: translate(100px,0); */

/* x与y可以分开写单独设置 */

/* transform: translateX(100px); */

transform: translateY(100px);

}

.translate_under {

width: 200px;

height: 200px;

background-color: pink;

border-radius: 100px;

/* 如果值是百分数，那么移动的距离就是盒子自身宽度或者高度的一半 */

transform: translateX(50%);

}

i {

/* translate 对于行内标签无效 */

transform: translate(100px,100px);

}

</style>

实例代码如下

<body>
    <div class="translate"></div>
    <div class="translate_under"></div>
    <span>少年不惧岁月长，彼方尚有荣光在</span>
</body>

2.旋转（rotate）

2D转换--旋转

rotate

2D旋转指的是让元素在2维平面内顺时针或者逆时针旋转

语法：

transform: rotate(度数)

重点：

1.rotate里面跟度数，单位是deg 比如rotate(45deg);

2.角度为正时，顺时针；相反，角度负时，逆时针

3.默认旋转的中心点事元素的中心点

2D转换中心点 transform-origin

语法：

transform-origin: x y;

重点：

1.注意后面的参数x和y用空格隔开

2.x y默认转换的中心点是元素的中心点（50% 50%）

3.还可以给x y设置像素或者方位名词(center top bottom left right)

根据下面实例进一步了解：

css代码如下：

<style>

.outside {

width: 500px;

height: 500px;

background-color: #999;

border: 2px solid #333;

margin: 100px auto;

}

.inside {

overflow: hidden;

width: 50px;

height: 50px;

background-color: pink;

margin: 200px auto;

}

.inside::after {

content: "黑马";

display: inline-block;

width: 50px;

height: 50px;

background-color: skyblue;

text-align: center;

line-height: 50px;

/* 左下角为中心点 */

transform-origin: left bottom;

/* 顺时针旋转90度 */

transform: rotate(90deg);

/* 过渡 */

transition: all 1s;

}

/* 鼠标经过时将after复原 */

.inside:hover::after {

transform: rotate(0deg);

}

</style>

html代码如下：

<body>
    <div class="outside">
        <div class="inside"></div>
    </div>
</body>

3.缩放（scale）

缩放 scale

语法：

transform: scale(x,y);

注意：

1.其中x和y用逗号隔开

2.transform: scale(1,1); 宽和高都放大一倍，相对于没有放大

3.transform: scale(2,2); 宽和高都放大2倍

4.transform: scale(2); 只写一个参数，相对于两个参数都一样相当于scale(2,2);

5.transform: scale(0.5,0.5); 缩小

6.scale缩放最大的优势：可以设置转换中心点缩放，默认以元素中心点缩放，而且不影响其他盒子

联系案例：

css代码如下：

<style>

.outside {

width: 400px;

height: 400px;

background-color: #555;

border: 1px solid #333;

margin: 100px auto;

}

.inside {

width: 200px;

height: 200px;

background-color: pink;

margin: 100px auto;

transition: all 1s;

}

.inside:hover {

transform: scale(2,2);

}

</style>

html代码如下：

<body>
    <div class="outside">
        <div class="inside"></div>
    </div>
</body>

总结

2D转换作为css3中有颠覆特性之一，使用范围广泛。移动（translate）里面的值是可以用百分数的，如果值是百分数，那么移动的距离就是盒子自身宽度或者高度的一半

苠苠超可爱

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3特性——2D转换

转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果2D转换作为css3中有颠覆特性之一，使用范围广泛。移动（translate）里面的值是可以用百分数的，如果值是百分数，那么移动的距离就是盒子自身宽度或者高度的一半1.移动（translate）2.旋转（rotate）
复制链接

扫一扫