CSS中的2D转换

最新推荐文章于 2023-07-12 13:11:15 发布

远方0905

最新推荐文章于 2023-07-12 13:11:15 发布

阅读量168

点赞数 1

分类专栏： html5+css 文章标签： 2D

本文链接：https://blog.csdn.net/qq_43198727/article/details/102993375

版权

html5+css 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

转换:
transform是CSS3中具有颠覆性的特性可以实现元素的位移、旋转缩放等效果
可以理解为变形
移动:translate
旋转:rotate
缩放:scale
2D转换:
2D转换是改变标签在二维平面上的位置和形状的一种技术。

语法:
transform:translate(x,y);或者分开写
transfrom:translateX(n);只移动X轴的话
transfrom:translateY(n);只移动Y轴的话

重点来了

定义2D转换中的移动，沿着X和Y轴移动元素
translate最大的优点:不会影响到其他元素的位置
translate中的百分比单位是相对于自身元素的translate:(50%,50%)
对行内标签没有效果
2D转换之旋转:rotate
2D旋转指的是让元素在2维平面内顺时针或者逆时针旋转。
语法规则
transform:rotate(度数)
2.重点
rolate里面跟度数，单位是deg比如rotate(45deg)
角度为正数顺时针负数为逆时针
默认旋转的中心点是元素的中心点。
一张图片给他设置为鼠标放上去旋转360度并添加过渡动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img {
            width: 150px;
            /* 顺时针旋转45度 */
            /* transform: rotate(3604eg); */
            border-radius: 50%;
            border: 5px solid pink;
            /* 过渡写在本身上，谁做动画给谁加 */
            transition: all 0.3s;
        }
        
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
    <img src="../images/jd_logo.png" alt="">
</body>

</html>

切换中心点继续旋转
我们可以自行设置中心点

语法:
transform-origin: x y;
注意

注意后面的参数 x和y用空格隔开
x y默认转换的中心点是元素的中心点(50% 50%)
还可以给 x y 设置像素或者方位名词(top bottom left right center)

!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            overflow: hidden;
            width: 100px;
            height: 100px;
            border: 1px solid pink;
            margin: 100px auto;
        }
        
        div::before {
            content: "德玛";
            display: block;
            width: 100px;
            height: 100px;
            background-color: purple;
            transform: rotate(180deg);
            transform-origin: left bottom;
            transition: all 0.1;
        }
        /* 鼠标经过div里面的before复原 */
        
        div:hover::before {
            transform: rotate(0deg)
        }
    </style>
</head>

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

鼠标放上前
放上之后快速的过渡成这样
2D转换之缩放scale
缩放顾名思义，可以放大和缩小，只要给元素就可以控制他是方大还是缩小
1、语法
transform:scale(x,y);
注意
1、其中的x和y之间用逗号隔开
2、transform:scale(1,1):宽和高都放大已被相当于没有放大
3、transform:scale(2，2):宽和高都放大了两倍
4、transform:scale(2):只写一个参数，第二个参数则和第一个参数一样相当于scale(2,2)
5、transform:scale(0.5,0.5):缩小
6、sacle缩放最大的优势:可以设置转换中心点缩放而且不影响其他盒子。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: purple;
            margin: 100px auto;
        }
        
        div:hover {
            /* 1、里面写的数字不跟单位 就是倍数的意思 1就是一倍 2就是2倍  */
            /* transform:scale(x,y); */
            /* transform: scale(2,2); */
            /* 2、修改了宽度为原来的两倍 高度不变 */
            /* transform: scale(2,1); */
            /* 我们可以选择缩放 值小于1就是缩放 */
            /* transform: scale(0.5,0.5); */
            /* transform: scale(0.5); */
            /* scale 的优势之处:不会影响到其他的盒子 而且可以设置缩放的中心点 */
            /* width: 300px;
            height: 300px; */
            transform: scale(2);
        }
    </style>
</head>

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

</html>

远方0905

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS中的2D转换

语法:transform:translate(x,y);或者分开写transfrom:translateX(n);只移动X轴的话transfrom:translateY(n);只移动Y轴的话重点来了定义2D转换中的移动，沿着X和Y轴移动元素translate最大的优点:不会影响到其他元素的位置translate中的百分比单位是相对于自身元素的translate:(50%,50%)...
复制链接

扫一扫

专栏目录