css3——2D转换

最新推荐文章于 2022-02-22 23:28:21 发布
最新推荐文章于 2022-02-22 23:28:21 发布
阅读量411 收藏 1
点赞数
分类专栏： 前端基础 文章标签： html css html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44325613/article/details/111594269
版权

文章目录

移动-translate

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

transform: translate(x, y);
transform: translateX(n);
transform: translateY(n);

     /* 移动盒子位置:定位、盒子的外边距、 2d转换移动*/
        div {
            width: 200px;
            height: 200px;
            background-color: aquamarine;

            /* 过渡效果 */
            transition: all 1s;
        }

        div:hover {
            /* 移动x轴 */
            /* transform: translateX(200px); */

            /* 移动y轴 */
            /* transform: translateY(100px) */
            /* x就是x轴上移动 y就是y轴上移动位置 中间用逗号分隔 */
            transform: translate(100px, 100px);
        }
    </style>
</head>

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

在这里插入图片描述

重点

  • translate最大优点:不会影响其他元素的位置，而且还不会脱标(使用定位absolute会脱标)。margin添加margin-top后，下面元素会随之移动】
  • translate中百分比单位是相对于自身元素的translate(50%,50%);
  • 对行内标签没有效果

不会影响其他元素案例
使用margin-top移动元素

    <style>
    	.top {
            width: 200px;
            height: 200px;
            background-color: palegreen;
            margin-top: 100px;
        }

        .bottom {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>

<body>
    <div class="top"></div>
    <div class="bottom"></div>
</body>

在这里插入图片描述

使用translate移动元素

<style>
    .top {
        width: 200px;
        height: 200px;
        background-color: palegreen;
        transform: translateY(100px);
    }

    .bottom {
        width: 200px;
        height: 200px;
        background-color: orange;
    }
</style>

在这里插入图片描述
应用: 鼠标hover时，图片向上浮动效果。使用translate最佳，因为向上浮动，不会影响其他盒子效果。

div盒子居中

盒子居中方法：

  1. 设定具体数据的margin-left以及margin-top

  2. 使用定位方法:

    水平居中:margin-left：50%，left:-(自身宽度的一半)

    垂直居中:margin-top:50%,top:-(自身高度的一半)

        <style>
        .father {
            position: relative;
            width: 400px;
            height: 400px;
            background-color: paleturquoise;
        }

        .son {
            position: absolute;
            /* 水平居中 */
            left: 50%;
            margin-left: -100px;
            /* 垂直居中 */
            top: 50%;
            margin-top: -50px;

            width: 200px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

    在这里插入图片描述
    3.使用定位+translate

    <style>
        .father {
            position: relative;
            width: 400px;
            height: 400px;
            background-color: paleturquoise;
        }

        .son {
            position: absolute;
            /* 水平居中 */
            left: 50%;
            top: 50%;
            /* 使盒子x轴以及y轴向左和上移动自身的50% */
            transform: translate(-50%, -50%);
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

在这里插入图片描述

旋转-rotate

语法

trasform:rotate(度数)
  • rotate单位是度数，即deg,如 rotate(90deg)
    <style>
        img {
            width: 500px;
            margin: 200px;
            /* 顺时针旋转 45度*/
            transform: rotate(45deg);
            /* 逆时针旋转 */
            /* transform: rotate(-45deg); */

        }

        .img:hover {}
    </style>
</head>

<body>
    <img src="xiaoxin.jpg" alt="">
</body>

在这里插入图片描述

图片旋转效果
  <style>
        img {
            width: 500px;
            margin: 200px;
          	 /*过渡效果*/
            transition: all 3s;

        }

        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
    <img src="xiaoxin.jpg" alt="">
</body>

在这里插入图片描述

三角形案例

<style>
        div {
            position: relative;
            width: 300px;
            height: 40px;
            border: 1px solid #000;
        }

        div::after {
            content: "";
            position: absolute;
            left: 270px;
            top: 6px;
            transform: rotate(45deg);
            width: 20px;
            height: 20px;
            border-bottom: 1px solid #000;
            border-right: 1px solid #000;
            transition: all .6s;
        }

        div:hover::after {
            top: 16px;
            transform: rotate(225deg);
        }
    </style>
</head>

<body>

    <div></div>

</body>

在这里插入图片描述

设置转换中心点-transform-orgin

语法

transform-orgin:x y;

重点

  • 注意后面的参数x和y用空格隔开
  • x y默认转换的中心点是元素的中心点(50% 50%)
  • 还可以给x y设置像素或者方位名词(top bottom left right center)
  <style>
        div {
            width: 200px;
            height: 200px;
            background-color: palegreen;
            margin: 100px auto;
            transition: all 1s;
            /* 设置旋转中心点: 方位名词 */
            transform-origin: left bottom; 

            /* 使用单位px */
            /* transform-origin: 50px 50px; */
        }

        div:hover {
            transform: rotate(360deg);
        }
    </style>
</head>

<body>

    <div></div>

</body>

在这里插入图片描述

旋转中心点案例

 <style>
        div {
            width: 200px;
            height: 200px;
        }

        .father {
            background-color: blue;
            overflow: hidden;
        }

        .son {
            text-align: center;
            font-size: 40px;
            line-height: 200px;
            color: #fff;
            background-color: skyblue;
            transition: all 2s;
            transform-origin: left bottom;


        }


        .son:hover.son {
            transform: rotate(180deg);
        }
    </style>
</head>

<body>

    <div class="father">
        <div class="son">
            前端
        </div>
    </div>

</body>

在这里插入图片描述

方法二

 <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            overflow: hidden;
            margin: 10px;
            float: left;
        }


        div::before {
            content: "前端";
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 40px;
            line-height: 200px;
            color: #fff;
            background-color: hotpink;
            /* 旋转效果 */
            transition: all 0.4s;
            transform-origin: left bottom;


        }


        div:hover::before {
            transform: rotate(180deg);
        }
    </style>
</head>

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

</body>

在这里插入图片描述

缩放-scale

语法

transform:scale(x,y);

注意

  • transform:scale(1,1):宽度和高度都放大一倍，等于没有放大
  • transform:scale(2,2):高和宽都放大2倍
  • transform:scale(2):只写一个参数，第二个参数和第一个参数一样，相当于scale(2,2)
  • transform:scale(0.5,0.5):缩小
  • scale缩放最大的优势:可以设置中心缩放点，默认以中心点缩放，而且不影响其他盒子
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
            /* 放大 */
            transform: scale(2, 2);
			/*缩小*/
            /*transform:scale(0.5);*/
        }
    </style>
</head>

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

未缩放效果
在这里插入图片描述
缩放后
在这里插入图片描述
变换缩放点

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;

            /* 变换缩放点*/
            transform: scale(0.5);
            transform-origin: right bottom;
        }
    </style>
</head>

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

在这里插入图片描述
scale优势

缩放也可以通过同时修改宽高来缩放,有何不同?

答: scale不会影响其他盒子，而且可以设置缩放中心点。通过修改宽高进行缩放，影响其他盒子，修改时往两边延伸。

 <style>
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
            margin: 100px auto;
        }

        /* 会影响下面元素，缩放时两边延伸 */
        /* div:hover {
            width: 400px;
            height: 400px;
        } */

        /* 不会影响下面元素 */
        div:hover {
            transform: scale(2);
        }
    </style>
</head>

<body>
    <div></div>
    BALCKPINK

修改宽高
在这里插入图片描述
scale缩放
在这里插入图片描述

案例-【经过图片放大效果】
 <style>
        div {
            width: 300px;
            float: left;
            margin: 10px;
            /* 进行放大后，超出部分hidden */
            overflow: hidden;
        }

        img {
            width: 100%;
            /* 过渡效果 */
            transition: all .5s;
        }

        img:hover {
            transform: scale(1.3);
        }
    </style>
</head>

<body>
    <div><a href="#"><img src="xiaoxin.jpg" alt=""></a></div>
    <div><a href="#"><img src="xiaoxin.jpg" alt=""></a></div>
    <div><a href="#"><img src="xiaoxin.jpg" alt=""></a></div>
</body>

在这里插入图片描述

案例-分页效果
<style>
        div {
            width: 400px;
            height: 100px;
            border: 1px solid #000;
        }

        ul {

            background-color: blueviolet;
        }

        li {
            width: 10px;
            height: 10px;
            line-height: 10px;
            border-radius: 30px;
            list-style: none;
            float: left;
            padding: 15px;
            margin: 4px;
            border: 1px solid aquamarine;

            /* 过渡效果 */
            transition: all .5s;
        }

        li:hover {
            transform: scale(1.2);
        }
    </style>
</head>

<body>
    <div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
        </ul>
    </div>

</body>

在这里插入图片描述

2D转换综合写法

  • 同时使用多个转换，格式

     transform: translate() rotate() scale();

    无顺序，中间空格隔开

  • 其顺序会影响转换效果(先旋转会改变坐标方向)

  • 同时有位移和其他属性，将位移放最前面（例如先旋转再位移，旋转后会改变坐标方向，出现不理想结果）

 <style>
        div {
            width: 200px;
            height: 200px;
            /* margin: 100px auto; */
            background-color: orange;
            transition: all .5s;
        }

        div:hover {
            transform: translate(150px, 150px) rotate(360deg) scale(1.5);
        }
    </style>
</head>

<body>
    <div>

    </div>

</body>

在这里插入图片描述

总结

  • translate(x,y)，移动，不影响其他盒子，单位：px,%,相对于自身高度和宽度来计算,可以分开translateX(x),translateY(y),对行内元素不起作用。
  • rotate(度数),旋转。不影响其他盒子，单位:deg,
  • scale(x,y)，缩放。参数为数字。可以是小数点。不影响其他盒子
  • 设置转换中心点 transform-orgin:x,y。 参数可以是百分比，像素或者方位名词
  • 进行综合写法是，同时有位移和其他属性，位移放前面

此笔记来源于黑马pink老师，希望大家多多点赞啊！！！https://space.bilibili.com/415434293
完结撒花
在这里插入图片描述

css3 transform+折扇案例+魔方案例
weixin_38730820的博客
03-22 256
css3 2D属性 变形属性 transform:; 2D变换: 在平面空间的位移transform:translate(); 旋转 transform:rotate(); 缩放 transform:scale(); 倾斜 transform:skew(); 位移: transform:transla...
CSS3特性——2D转换
weixin_55701027的博客
12-12 438
转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果2D转换作为css3中有颠覆特性之一，使用范围广泛。移动（translate）里面的值是可以用百分数的，如果值是百分数，那么移动的距离就是盒子自身宽度或者高度的一半1.移动（translate）2.旋转（rotate）
详解CSS3 2D转换及易忽略的相关知识点( 移动translate，旋转rotate，缩放scale)
m0_49662897的博客
02-22 639
详解CSS3 2D转换及易忽略的相关知识点( 移动translate，旋转rotate，缩放scale)
transform放大案例
qq_36939013的博客
08-01 2241
效果 鼠标放上去放大 html代码 css代码 使用scale最大的好处是不会影响其他盒子的布局
transform的使用以及实战案例
qq_42000660的博客
07-18 1758
一、transform介绍 1、位移 translate transform: translateX(30px) / translateY(30px) / translateZ(30px) 分别代表元素在水平方向/竖直方向/垂直屏幕的方向移动的位置大小 特点 其和position：relative一样，元素相对于自己改变位置，不会脱离文档流，translate位移时，默认原点时元素的中心位置 2、放大与缩小scale transform: scale(n)当n大于1时则为放大原来的n倍，当n小
CSS3——2D转换
nervelin的博客
06-11 156
先来学习下网页上的二维坐标系 位移 transform: translate(x,y); transform: translateX(); transform: translateY(); 作用：移动元素的位置 优点：不影响其他元素的位置 注意事项： 如果不移动位置，写0 可以写百分比，相对于元素自身的宽和高 像素值和百分比可以写负值 应用：孩子在父元素中水平垂直居中 /* 定位+位移 */ position: absolute; left: 50%; top: 50%; transform: tr
CSS3——2D转换transform
运算符重载之String
06-03 174
1.2D·转换之移动translate 语法 transform: translate(x,y); 也可以分开写 translateX(n) translateY(n)
CSS3—— 2D转换 3D转换 过渡 动画
weixin_30652271的博客
05-26 171
2D转换 对元素进行移动、缩放、转动、拉长或拉伸 ————> ————> 移动 顺时针旋转 扩大/缩小 倾斜 2D变换合并 3D转换 绕x轴 绕y轴 过渡 从一种样式逐渐改变为另一种的效果 ———鼠标放置———> 多项改变 ——————> 动画 动画属性绑定到...
10CSS3——2D3D转换
Blog of Lytracy
09-30 332
文章目录1、转换属性2、transform-origin CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。我们将结合过渡功能对 CSS3 的 2D 、3D 转换进行学习。 2D 转换 3D 转换 1、转换属性 转换有下列属性： transform： 将 2D 或 3D 转换应用到元素上去。 transform-origin：可以改变被转换元素的位置。 transform-style：规定被嵌套元素如何在 3D 空间中显示。 perspective：规定 3D 元素的透视效果，与 perspe
随手记——css3 2D转换（transform）
01-08
css3 2D转换（transform） 位移（translate） 旋转（rotate） 转换中心点（transform-origin） 缩放（scale） 2D转换综合写法 正文 __start： 位移（translate） 语法 说明 transform:translate(x,y) 元素在x...
CSS3——2D变形(CSS3) transform
流楚丶格念的博客
07-15 4480
让青春吹动了你的长发2D变形(CSS3) transform移动 translate(x, y)缩放 scale(x, y)旋转 rotate(deg)transform-origin可以调整元素转换变形的原点倾斜 skew(deg, deg)案例总预览放大缩放旋转旋转的楚乔特效 2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
CSS3的2D转换和3D转换，你了解了嘛？
wj624的博客
08-19 926
css3的2D转换和3D转换 CSS3大纲： 本次讲解css3带来了两种转换：2D转换和3D转换 1. 2D转换 转换( transform)是CSS3中具有颠覆性的特征之一，可以实现元素的位移(transform)、旋转(rotate)、缩放(scale)等效果 2D转换是改变标签在二维平面上的位置和形状的一种技术，要先学习二维坐标系。 1.1 2D转换之移动 transform ​ 2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。 语法格式： transform: tra
CSS3——CSS3矩阵matrix进行2D变换的数学原理
Astar的博客
10-05 1990
css3的2D转换中matrix接受6个参数，却可以实现平移、旋转、放缩、斜切四种效果。它是如何做到的呢？ 预备知识：矩阵相乘 先将matrix接受的六个参数记为a,b,c,d,e,f，该变换矩阵记为 二维平面上一个点记为（x,y），为了与向量区分开，我们使用数字1代表点，0代表向量，则二维平面上一个点应记为（x,y,1），为了使该点经过变换后依旧为（x,y,1）的形式，矩阵可以改为 进行相乘...
CSS第十天学习总结—— CSS3 2D转换
weixin_52819925的博客
08-01 368
CSS3 2D转换 转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放。 缩放：scale 移动：translate 旋转：rotate 倾斜：skew （不介绍，感兴趣自己看https://blog.youkuaiyun.com/alwayssmlilewpc/article/details/79890004） 2d转换是改变标签在2维平面上的位置和形状的一种技术。 2维坐标系 2维坐标系其实就是指布局的时候的坐标系。 2d移动 translate 2d移动是2d转
HTML5+CSS3基础
weixin_44325613的博客
09-27 8001
HTML 网页 什么是网页 ​ 网站是网页集合 ​ 网页是网站的一"页"，通常是HTML格式的文件，它要通过浏览器来阅读 网页是构成网站的基本元素，它通常由图片、连接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.html或.html后缀结尾的文件，因此也称为HTML文件 网页是由网页元素组成，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户的 什么是HTML HTML指的是超文本标记语言(Hyper Text Markup Language)，它是用来描述网页的一种语言
3D转换
weixin_44325613的博客
02-14 1162
文章目录3D转换初识3D转换位移-translate3d透视-perspective旋转-rotate3drotateXrotateYrotateZrotate3dtransform-style3d呈现两面盒子反转案例3D导航栏旋转盒子浏览器私有前缀 3D转换 初识3D转换 近大远小 物体后面遮挡不可见 三维坐标系 x轴:水平向右 【x右边是正值，左边是负值】 y轴:垂直向下 【y下面是正值，上面是负值】 z轴:垂直屏幕【往外面是正值，往里面是负值】 3D位移:translate3D(x
JS基础2.0
weixin_44325613的博客
07-29 1068
day1 js简介 js:javascript js 是一种直译型的脚本语言 script 脚本 js 组成部分 ECMAScript + BOM(browser object model) + DOM(document object model) js 历史 为了解决表单验证问题 js 前端页面效果 + 后端进行交互！！！！！ 2+2+2 js创建 内部js <script> // 内部js </script> 外
移动端
weixin_44325613的博客
02-14 850
文章目录移动端移动端基础移动端常见浏览器手机屏幕现状常见移动端屏幕尺寸移动端调试方法视口layout viewport布局视口visual viewport视觉视口ideal viewport理想视口总结meta视口标签标准viewport设置二倍图物理像素比多倍图背景缩放 background-size背景图片二倍图多背图切图移动端开发选择移动端技术解决方案css初始化css3 盒子模型特殊样式移动端常见布局技术选型流式布局京东首页准备顶部导航栏二倍精灵图图片格式焦点图品牌日导航栏模块新闻模块flex布局
【导航栏练习】凸起导航栏效果
weixin_44325613的博客
04-09 720
实现效果 注意：hover导航栏时，是凸起效果 思路 由于导航颜色是渐变的，所以现阶段使用背景颜色实现 高度说明:
CSS3动画特效源码——萌萌大白制作教程
CSS3是W3C组织最新推出的层叠样式表标准，它引入了诸多新特性，包括2D/3D转换、动画效果、阴影效果、渐变效果等。在前端开发中，CSS3已成为实现动态网页和UI交互效果的重要工具。 本资源主要涉及的CSS3知识点包括：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值