039CSS3之2D转换

最新推荐文章于 2024-08-25 20:52:11 发布
最新推荐文章于 2024-08-25 20:52:11 发布
阅读量355 收藏
点赞数
分类专栏： HTML5 文章标签： css3 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hyc_cheng/article/details/124646733
版权

一、简介

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

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

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

二、二维坐标系

2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系

在这里插入图片描述

三、2D转换之移动translate

1、简介

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
在这里插入图片描述

2、语法
transform: translate(x,y); 或者分开写
transform: translateX(n);
transform: translateY(n);
3、注意
  • 定义 2D 转换中的移动，沿着 X 和 Y 轴移动元素
  • translate最大的优点：不会影响到其他元素的位置
  • translate中的百分比单位是相对于自身元素的 translate:(50%,50%);
  • 对行内标签没有效果
4、demo案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
         /* 移动盒子位置的三种方法： 
         1、定位   
         2、盒子的外边距
         3、2d转换移动 */

        div{
            width: 200px;
            height: 200px;
        }
        div:nth-of-type(1){
            background-color: #ccc;
            /* x就是x轴上移动位置 y 就是y轴上移动位置 中间用逗号分隔*/
            /* transform: translate(x, y); */
            /* transform: translate(100px, 100px); */
            /* 1. 我们如果只移动x坐标 */
            /* transform: translate(100px, 0); */
            /* transform: translateX(100px); */
            /* 2. 我们如果只移动y坐标 */
            /* transform: translate(0, 100px); */
            /* transform: translateY(100px); */
            transform: translate(100px,100px);
        }
        div:nth-of-type(2){
            background-color: green;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

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

5、盒子实现水平居中和垂直居中案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            position: relative;
            width: 500px;
            height: 500px;
            background-color: #ccc;
            margin: 100px auto;
        }
        p{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100px;
            height: 100px;
            background-color: green;
            /* 方法1：让外边距向左偏移自身宽度和高度的一半 */
            /* margin-left: -50px;
            margin-top: -50px; */
            /* 方法2：使用2d转换的移动功能 */
            /* translate中的百分比单位是相对于自身元素的 translate:(50%,50%); */
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

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

四、2D转换之旋转rotate

1、简介

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

在这里插入图片描述

2、语法
transform:rotate(度数)
3、注意
  • rotate里面跟度数， 单位是 deg 比如 rotate(45deg) , deg的全称为degree 美 [dɪˈɡriː] 意思是度数
  • 角度为正时，顺时针，负时，为逆时针
  • 默认旋转的中心点是元素的中心点
4、案例1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
            div{
                width: 500px;
                height: 500px;
                margin: 100px auto;
            }
            div img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
                border: 5px solid #ccc;
                /* 过渡写到本身上，谁做动画给谁加 */
                transition: all 2s;
            }
            div img:hover{
                /* 顺时针旋转45度 */
                transform: rotate(45deg);
            }
    </style>
</head>
<body>
    <div>
        <img src="./media/pic.jpg" alt="">
    </div>
</body>
</html>

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

5、案例2：利用2d转换之旋转制作CSS三角
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            position: relative;
            width: 500px;
            height: 100px;
            border: 4px solid #ccc;
            margin: 100px auto;
        }
        div::after{
            position: absolute;
            top: 30px;
            right: 50px;

            content: '';
            width: 10px;
            height: 10px;
            border-right: 2px solid #ccc;
            border-bottom:  2px solid #ccc;
            /* 将右边框和下边框旋转45度 */
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div>

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

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

五、2D转换之中心点transform-origin

1、简介

我们可以设置元素转换的中心点

2、语法
transform-origin: x y;
3、注意
  • 注意后面的参数 x 和 y 用空格隔开
  • x y 默认转换的中心点是元素的中心点 (50% 50%)
  • 还可以给x y 设置 像素 或者 方位名词 （top bottom left right center）
4、案例1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: #ccc;
            margin: 100px auto;
            /* 设置过渡动画 */
            transition: all 2s;
            /* 1.可以跟方位名词 */
            /* transform-origin: left bottom; */
            /* 2. 默认的是 50%  50%  等价于 center  center */
            /* 3. 可以是px 像素 */
            /* 把中心点设置在左下角 */
            /* 等价于transform-origin: left bottom; */
            transform-origin: 0px 200px;
        }
        div:hover{
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果：
在这里插入图片描述
这里需要注意的是，transform-origin: 0px 200px; 这条语句正确的做法是放到本身标签上，如果放到div:hover 上，会有意向不到的效果，可以自己去试试。

5、案例2
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div{
            width: 300px;
            height: 300px;
            border: 1px solid #ccc;
            margin: 100px auto;

            overflow: hidden;
        }
        div::before{      
            display: block;
            width: 100%;
            height: 100%;
            background-color: green;

            content: '';          
            transform: rotate(90deg);
            transform-origin: left bottom;
            transition: all 3s;
        }
        /* 鼠标经过div 里面的before 复原 */
        div:hover::before{
            transform: rotate(0deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

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

六、2D转换之缩放scale

1、简介

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

2、语法
transform:scale(x,y);
3、注意
  • 注意其中的x和y用逗号分隔
  • transform:scale(1,1) ：宽和高都放大一倍，相当于没有放大
  • transform:scale(2,2) ：宽和高都放大了2倍
  • transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
  • transform:scale(0.5,0.5)：缩小
  • scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
4、案例1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: #ccc;
            margin: 100px auto;
            /* 过渡 */
            transition: all 2s;
            /* 还可以设置中心点进行缩放  左下角位置为中心点 */
            /* transform-origin: left bottom; */
        }
        div:hover{
            /* 1. 里面写的数字不跟单位 就是倍数的意思 1 就是1倍  2就是 2倍 */
            /* transform: scale(x, y); */
            /* transform: scale(2, 2); */
            /* 2. 修改了宽度为原来的2倍  高度 不变 */
            /* transform: scale(2, 1); */
            /* 3. 等比例缩放 同时修改宽度和高度，我们有简单的写法  以下是 宽度修改了2倍，高度默认和第一个参数一样*/
            /* transform: scale(2); */
            /* 4. 我们可以进行缩小  小于1 就是缩放 */
            /* transform: scale(0.5, 0.5); */
            /* transform: scale(0.5); */
            /* 5. scale 的优势之处： 不会影响其他的盒子 而且可以设置缩放的中心点*/
            transform: scale(2);
        }
    </style>
</head>
<body>
    <div></div>

</body>
</html>

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

5、案例2：图片放大
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            /* 超出部分隐藏 */
            overflow: hidden;
            width: 225px;
            height: 137px;
            float: left;           
            border: 1px solid #ccc;         
        }
        div img{
            width: 100%;
            height: 100%;          
            /* 添加过渡效果 */
            transition: all 3s;
        }
        div img:hover{
            transform: scale(2);
        }
    </style>
</head>
<body>
    <div><img src="./media/scale.jpg" alt=""></div>
    <div><img src="./media/scale.jpg" alt=""></div>
    <div><img src="./media/scale.jpg" alt=""></div>
</body>
</html>

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

6、案例3：分页按钮放大
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            margin: 100px auto;
        }
        ul li{
            float: left;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 1px solid #ccc;
            border-radius: 50%;
            list-style: none;
            margin-right: 10px;
            cursor: pointer;
            /* 过渡 */
            transition: all .5s;
        }
        ul li:hover{
            transform: scale(1.2);
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>
</html>

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

七、2D转换之综合写法

  1. 同时使用多个转换，其格式为：transform: translate() rotate() scale() ...等，
  2. 其顺序会影转换的效果。（先旋转会改变坐标轴方向）
  3. 当我们同时有位移和其他属性的时候，记得要将位移放到最前

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            background-color: #ccc;
            margin: 100px auto;
            transition: all 2s;
        }
        div:hover{
            /* 我们同时有位移和其他属性，我们需要把位移放到最前面 */
            transform: translate(100px,50px) rotate(90deg) scale(1.5);
        }
    </style>
</head>
<body>
    <div>小何</div>
</body>
</html>

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

八、2D转换总结

  • 转换transform 我们简单理解就是变形 有2D 和 3D 之分
  • 我们暂且学了三个 分别是 位移 旋转 和 缩放
  • 2D 移动 translate(x, y) 最大的优势是不影响其他盒子， 里面参数用%，是相对于自身宽度和高度来计算的
  • 可以分开写比如 translateX(x) 和 translateY(y)
  • 2D 旋转 rotate(度数) 可以实现旋转元素 度数的单位是deg
  • 2D 缩放 sacle(x,y) 里面参数是数字 不跟单位 可以是小数 最大的优势 不影响其他盒子
  • 设置转换中心点 transform-origin : x y; 参数可以百分比、像素或者是方位名词
  • 当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前
小何在线
关注
专栏目录
CSS3之2D转换、3D转换
weixin_45707229的博客
07-07 298
CSS3最具有颠覆性特征之一的transform转换。可以对元素进行2D、3D的位移，旋转，缩放等操作
CSS3（ 2D转换，3D转换）
m0_68169119的博客
07-22 274
css转换的案例，详解
CSS3 2d 转换
m0_51732708的博客
09-20 385
<h1>CSS3 2d 转换</h1> 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 CSS是什么？ CSS样式是表现 就像网页的外衣，比如：标题字体、颜色变化、为标题加入背景图片、边框等。 所有这些用来改变内容外观的东西称之为表现。 提示：以下是本篇文章正文内容，下面案例可供参考 一、CSS3 2d 转换 （1）translate() 方法：设置元素的移动。　 transform:transl.
掌握CSS3的transform-origin：让你的网页动画更生动
最新发布
2401_85439108的博客
08-25 633
属性定义了元素变换的基点。默认情况下，这个基点位于元素的中心，即50% 50%。但通过改变这个属性，你可以控制变换的中心点，从而实现更多样化的动画效果。
CSS3的2D转换
JJ_Smilewang的博客
04-12 963
转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果 转换（transform）你可以简单理解为变形。 在学习2D转换之前，我们需要先了解vscode中的二维坐标系，它和我们数学中的坐标系稍微有点不一样，它是向右为x轴正方向，向下为y轴正方向，如下图所示： 1.2D位移 translate 所谓的2d位移就是可以通过在x轴、y轴上的位移值，改变物体的位置，有点类似于定位。 1.语法 transform: translate(x,y);
CSS3 2D转换（一）
weixin_45901736的博客
04-24 270
转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果，可以简单理解为变形。
transform-origin属性详解
热门推荐
鹿蹊zz的博客
05-27 4万+
transform-origin用于设置动画的基点(中心点) ， 适用于所有块级元素及某些内联元素。 必须配合transform使用 默认情况下，元素的动作参考点为元素盒子的中心 可以设置九个位置的值：水平方向： left center right 0 50% 100% ......
css3学习之2D转换功能详解
09-27
在CSS3中，2D转换是一个强大的特性，它允许开发者对网页元素进行一系列二维空间内的图形变换，包括平移、旋转、缩放和倾斜。这一功能显著提升了网页设计的动态性和交互性。本文将深入探讨CSS3中的2D转换功能，帮助你...
11.11_css3之2D转换.xmind
11-11
11.11_css3之2D转换.xmind
CSS transform-origin
CyberPlayer的博客
03-01 1万+
一、transform-origin属性介绍 transform-origin属性表示在对元素进行变换的时候，设置围绕哪个点进行变化的。默认情况，变换的原点在元素的中心点，即是元素X轴和Y轴的50%处，如下图所示： 我们没有使用transform-origin改变元素原点位置的情况下，CSS变换进行的旋转、移位、缩放等操作都是以元素自己中心（变换原点）位置进行变换的。但很多时候需要在不同的位置对元素进行变换操作，我们就可以使用transform-origin来对元素进行原点位置改变，使元素原.
CSS3形变——transform与transform-origin画时钟
weixin_30547797的博客
03-10 237
css3属性transform和transform-origin“画”时钟 效果图 　　前言 八哥：哈喽，大家好！好攻城狮就是我就是你们的小八，欢迎收听你的月亮。。。哦不，是很高兴与你们共享知识，诶呀呀，现在夜黑风髙好做事呀，嘿~嘿~嘿，你们懂的！哈哈^_^ 哎哟。哟。哟！九儿你轻点。。。 小九：大晚上的不睡觉发什么骚呢！ 八哥捂着耳朵：你看看你看看，不单纯了吧！本着学无止境，不分...
css transform-origin 的作用说明，小程序 createAnimation
学习笔记
01-18 3007
css transform-origin 的作用说明，小程序 transformOrigin: “50% 100% 0” 正如名字所写的， transform-origin 就是指定变换的原点。就是一个点。 其中的三个参数值分别代表的是这个点的 xyz轴上的相对位置。 x 轴方向上的位置 50%，y 轴方向上的位置 50%， z 轴方向上的位置 0%，其百分比是相对于这个元素来说的。 默认值 c...
二维坐标系的转换
weixin_33859665的博客
07-09 3361
二维坐标系的变换分为旋转变换和平移变换。 一、旋转变换 假设已知基坐标系XOY中的一点P（x，y），坐标原点为O，绕点O旋转θ，可以求得点P在新坐标系X'OY'中坐标值（x'，y'）,如下图所示： 求解x'和y'的关键是坚持用已知的边做斜边来求解，结合上图利用三角函数可以求得： x'=x·cos(θ)+y·sin(θ) y'=y·cos(θ)-x·sin(θ) 那么点P在X'OY'...
二维坐标排序
蘇丶的博客
10-31 1万+
在提取光场子孔径图像重要步骤：微透镜中心点排序 由于opencv提取到的微透镜中心坐标不是按从上到下从左到右的顺序，因此需要对中心点进行排序； 这个问题就类似于二维坐标排序： 注：这个图是CSDN论坛上面的一个人问的类似的问题，我拿来用一用。首先我们先看一下取得中心点的坐标 同一行的中心点坐标可能会相差几个数，但是他们是属于同一行，然后在同一行中我们要从左到右给中心点进行排序。 比
二维坐标，x从小到大排列，y从大到小排列
贝铃-Turing的专栏
12-20 6007
目前能想到的最完美的方案 重点思路：将xy捆绑到一块排序，因为y是倒叙需要计算下对应正序时的值，也就是拿y组最大值减去当前值，得到x升序y升序组合数组xy，需要考虑到y组位数问题 import java.util.Arrays; public class Test { public static void main(String[] args) { Test test = new T
transform(变形)和transform-origin(变形原点)
hsany330的专栏
07-28 1211
transform(变形)和transform-origin(变形原点)的说明：       目前这两个属性得到了除去ie以外各个主流浏览器webkit，firefox，opera的支持，属性名分别为       -webkit-transform，-moz-transform，-o-transform; 1、改变元素基点transform-origin transform
一篇文章吃透 CSS3 属性： transition过渡 与 transform动画
weixin_52212950的博客
09-28 1万+
transition 过渡与transform动画 这两个新属性的参数确实比较复杂，它们可以做出 CSS 的一些基础动画效果，平移，旋转，倾角......等等，这些也是我早期学习 CSS 的难记易忘之处，今天给大家详细总结出来。一：transition 过渡transition 可以做出 CSS 的过渡效果，例如要过渡的属性名称，要过渡的时间，过渡的延迟等待时间，过渡的速度变化（过渡类型）
CSS3 2D转换详解：translate、rotate、scale、skew实战
"这篇教程详细介绍了CSS3中的2D转换功能，包括translate、rotate、scale和skew四个主要方法，以及如何使用它们对元素进行移动、缩放、旋转和倾斜操作。通过实例代码展示了如何应用这些转换效果。" 在CSS3中，2D转换...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值