transform 平面转换（2d）

最新推荐文章于 2023-07-16 14:03:43 发布
最新推荐文章于 2023-07-16 14:03:43 发布
阅读量304 收藏 2
点赞数 1
分类专栏： HTML+CSS 文章标签： 平面 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50260510/article/details/129492725
版权

一、平移

1.原理: 使用transform属性实现元素的位移、旋转、缩放等效果。

2.语法: transform: translate(水平移动距离, 垂直移动距离)。

3.取值: 1.像素单位数值; 2.百分比（参照物为盒子自身尺寸）; 3.X轴正向为右，Y轴正向为下。

4.注意:

（1）translate()如果只给出一个值,代表在X轴方向移动;

（2）单独设置某个方向的移动距离：translateX() & translateY();

（3）位移移动的百分比是自己的大小,x轴是自己的宽,y轴是自己的高;

（4）位移在移动时不会影响其他的盒子,有类似相对定位的特点.

.box{
            width: 200px;
            height: 200px;
            background-color: aqua;
            /* 1.连写 */
            transform: translate(200px,0px);
            /* 2.空格写法 */
            transform: translateX(100px) translateY(0);
            /* 3.分开写 (注意css的覆盖问题,当如下情况分开写的时候,x轴默认为零)*/
            transform: translateX(100px);
            transform: translateY(100px);
        }

二、旋转

1.原理： 使用rotate实现元素旋转效果。

2.语法: transform: rotate(deg);

（1）取值为正, 则顺时针旋转;

（2）取值为负, 则逆时针旋转;

3.注意：

（1）先位移后旋转,使用transform复合位移属性的时候要先位移再旋转,如果先旋转,会造成坐标轴发生改变;

（2）translate(-50%,-50%)实指再默认状态或者hover状态保持盒子居中

4.多重转换

原理：旋转会改变网页元素的坐标轴向，先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果。

使用transform-origin属性改变转换原点

1.语法： transform-origin: 原点水平位置 原点垂直位置；

2.取值：1.方位名词（left、top、right、bottom、center）；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>改变盒子的旋转中心</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 200px auto;
            transition: all 1s;
            /* 改变盒子的旋转中心:transform-orign */
            /* 方法一: */
            transform-origin: left top;
            /* 方法二: */
            transform-origin: 200px 0px;
            /* 方法三: */
            transform-origin: 50% 0;

        }

        .box:hover{

            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div class="box"></div>
    
</body>
</html>

三、缩放

1.原理： 使用scale属性改变元素的尺寸。

2.语法：

（1）transform: scale(x轴缩放倍数, y轴缩放倍数);一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放；

（2）transform: scale(缩放倍数);scale值大于1表示放大, scale值小于1表示缩小；

（3）transform: scale(1);1倍就是不变；

（4）transform: scale(0.5); 1倍以下是缩小；

（5）transform: scale(-0.5);负值:值小于-1是缩小,值大于-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>2d盒子的缩放效果</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 200px auto;
            /* 缩放语法:transform:scale(水平缩放,垂直缩放);  一般我们只取一个值,另一个等比例进行缩放,取值不带单位,代表缩放的倍数. */
            /* transform: scale(2,1.5);
            transition: all 1s;  */
        }

        .box:hover{
            /* 宽和高等比例缩放2倍 */
            /* transform: scale(2); */
            /* 1倍就是不变 */
            transform: scale(1);
            /* 1倍以下是缩小 */
            /* transform: scale(0.5); */
            /* 负值:值小于-1是缩小,值大于-1是放大 */
            transform: scale(-0.5);
        }

     /* 需求1:如何在不改变宽高的情况下让盒子增大?
        解决:内边距+边框
        需求2:在不改变宽高情况下同时不设置盒子模型情况下让盒子增大?
        解决:2d缩放(缩放可以取负值缩小,缩放的倍数为1时表示不变,1倍以下是缩小,1倍以上是放大) */

    </style>
</head>
<body>
    <div class="box"></div>
    
</body>
</html>

四、倾斜

1.原理： 使用skew属性改变元素的形状。

2.语法：

（1）2d倾斜语法:transform:skew(deg)；skewX:水平倾斜； skewY:垂直倾斜；

（2）角度不能设置为90deg；

（3）向右倾斜取正值,向左倾斜取负值；

（4）2d推荐综合写法:位移 旋转 缩放 倾斜 ；

transform: translatex(100px) rotate(0.5turn) scale(1) skew(60deg);

<!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>盒子的倾斜</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 200px auto;
            /* 2d倾斜语法:transform:skew(deg)
               角度不能设置为90deg 
               向右倾斜取正值,向左倾斜取负值
               skewX:水平倾斜
               skewY:垂直倾斜*/
            transform: skew(6deg);

            /* 2d推荐综合写法:位移 旋转 缩放 倾斜 */
            transform: translatex(100px) rotate(0.5turn) scale(1) skew(60deg);

        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

五、渐变

1.原理： 使用background-image属性实现渐变背景效果。渐变是多个颜色逐渐变化的视觉效果；一般用于设置盒子的背景。

2.注意：

（1）linear-gradient:线性渐变；

（2）radial-gradient：径向渐变；

3.常见写法

默认从上往下： background-image: linear-gradient(red, yellow);

从左到右： background-image: linear-gradient(to right, red, blue);

改变渐变色方向： background-image: linear-gradient(60deg, red, green);

常用 透明色，黑色半透明渐变色： background-image: linear-gradient(transparent,rgba(0,0,0,.5));

颜色的从内到外渐变： background-image: radial-gradient(pink, skyblue) ；

六、案例展示

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>双开门案例</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 1366px;
            height: 600px;
            background: url(../03.素材/bg.jpg) no-repeat;
            margin: 0 auto;
            /* 溢出隐藏 */
            overflow: hidden;
        }

        .box div{
            width: 50%;
            height: 100%;
            /* 双开门移动的秒数 */
            transition: all 1s;
        }

        .box .left{
            float: left;
            background: url(../03.素材/fm.jpg) no-repeat;
        }

        .box .right{
            float: right;
            background: url(../03.素材/fm.jpg) no-repeat right 0;
            /* 选择右半边的图片 */
        }

        /* 添加双开门效果 */
        .box:hover .left{
            /* 位移的百分比是自己的大小 */
            /* 向上移是负值 */
            transform: translateY(-100%);
        }

        .box:hover .right{
            /* 向下移动式正值 */
            transform: translateY(100%);
        }



    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    
</body>
</html>

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>2d-旋转</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
        }

        .box img{
            /* 取一个值,另一个值会自适应 */
            width: 100%;
            /* 过渡时间 */
            transition: all 1s;
        }

        .box:hover img{
            /* 旋转的语法:transform:rotate;
            顺时针旋转取正值,逆时针旋转取负值;
            deg:度数;   turn:圈数; */
            transform: rotate(360deg);
            transform: rotate(1turn);
        }

    </style>
</head>

<body>
    <div class="box">
        <img src="../03.素材/rotate.png" alt="">
    </div>

</body>

</html>
你想要那颗糖
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
transform2D转换
FL_csdn1的博客
04-04 363
转换（transform) 是CSS3中具有颠覆性的特征之一，它可以实现元素的位移、旋转、缩放等效果，转换可简单理解为变形的意思。 以下是比较常用的三个属性： 移动：translate 旋转：rotate 缩放：scale 目录二维坐标系2D转换之移动-translate2D转换之旋转-rotate2D转换之缩放-scale2D转换的综合写法 二维坐标系 2D转换是改变在二维平面上的位置和形状的一种技术，在学习2D转换之前 首先得了解一下二维坐标系 在数学中 ，坐标系是下面这样的 但是在网页中
Web前端之变形：平移、旋转与缩放
花&败
11-24 1525
变形就是指通过css来改变元素的形状或位置变形不会影响到页面的布局transform用来设置元素的变形效果。
CSS：transform顺序问题（translate()+rotate()）
weixin_46585382的博客
04-08 1295
CSS：transform顺序问题（translate()+rotate()）
028CSS-transform:translate 2D
Gy_9543的博客
07-22 86
移动 translate 不会影响其他元素的位置 旋转 rotate deg是单位度 缩放 scale(1.1) 放大1.1倍 transform-origin 设置旋转元素的基点位置： 综合写法 顺序 transform:translate(50px,50px) rotate(45deg) scale()
前端HTML transform2D变换
个人笔记
03-01 152
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .one{ width: 300px; height: 300px; background-color: pink
css3 animation动画360旋转。旋转效果用transform:rotate过渡。
mentalitys的博客
09-20 1万+
旋转：    &lt;div class="lds-hourglass"&gt;&lt;/div&gt; .lds-hourglass { display:inline-block; position:relative; width:72px; height:72px } .lds-hourglass:after { content:" "; display:block; ...
使用平面转换、渐变色仿部分喜马拉雅界面
最新发布
05-31
平面转换（2D Transforms）允许我们在二维空间中改变元素的位置、大小和方向。常见的转换属性有`transform: translate()`, `rotate()`, `scale()` 和 `skew()`。例如，我们可以使用`translateX()` 和 `translateY()`...
四参数法平面坐标转换处理工具详解
10-30
在ArcEngine中，可以使用IAffineTransformation2D3接口实现代码级别的四参数转换，处理大批量数据。 除了ArcGIS，还有其他工具可用于四参数坐标转换： 1. COORD.exe是一款小巧实用的工具，特别为中国用户设计，...
css3学习之2D转换功能详解
01-19
2D转换的属性名为transform，使用方法为transform:method(value)。 2D转换方法有translate、scale、rotate、skew、matrix，还有基于这些分支出的translateX、scaleY等。 这里，我将会介绍到以下转换方法： ...
9个3D＆2D转换与过渡画廊特效
11-17
3D到2D转换：这个过程通常是将3D场景投影到2D平面上，以便在屏幕上显示。最常见的是透视投影，它模拟人眼从一定角度观察物体的方式，使远离观察者的东西显得更小。 2D到3D转换：在某些情况下，可能需要将2D图像转化...
3D轮播-2D-平面
07-24
为了实现兼容性，项目会检测用户环境，并根据系统等级的降级，逐渐将3D效果转换为2D，甚至最终呈现为平面效果。这通常通过JavaScript来实现，例如使用Modernizr这样的库来检测浏览器特性，然后根据结果应用相应的CSS...
css3-transform属性先后顺序问题
jjhkfgh的博客
08-14 876
图1 就是原来的坐标轴， 先旋转再移动，他是先将坐标轴进行了旋转（就像图中红色为原来的坐标轴，但是先旋转了，他他的坐标轴也就根据你所设置的度数对整个坐标轴进行了旋转），之后又在旋转之后形成的新坐标系中进行移动的。 而先移动再旋转， 他移动之后还是按照原来（图1）的坐标系进行旋转，而没有形成新的坐标方位。 简单来说就是如果先旋转，就是带着他的坐标轴一起旋转的，旋转过后再移动就要考虑现在坐标轴的XYZ的方向了，因此两个顺序移动之后是两种不同的效果。 ...
transform属性2D转换用法详细介绍
zy1992As的博客
04-10 1273
CSS3中的变形允许动态的控制元素，可以在网页中对元素进行移动、缩放、倾斜、旋转，或结合这些变形属性产生复杂的动画。通过CSS3中的变形操作，可以让元素生成静态视觉效果，也可以结合过渡和动画属性产生一些新的动画效果。CSS3的变形(transform)属性可以让元素在一个坐标系统中变形。这个属性包含一系列变形函数，可以进行元素的移动、旋转和缩放。transform属性的基本语法如下。 在上面的语法格式中，transform属性的默认值为none，适用于内联元素和块元素，表示不进行变形。transform
css3——transform：rotate（旋转）、scale（缩放）、skew（拉伸）、translate（平移）、transform-origin
zyz00000000的博客
09-28 1万+
注意：transform是复合属性，拆开写会替代，先平移再旋转和先旋转再平移的结果是不同的 1. CSS3 转换：transform属性可以对元素进行移动、缩放、转动、拉长或拉伸 注意：Internet Explorer 9 要求前缀 -ms- 版本，Internet Explorer 10, Firefox, 和 Opera支持transform 属性，Chrome 和 Safari 要求...
html+css---transform(2d\3d变形)
m0_57124753的博客
07-16 174
# transform:perspective(200px)--->子元素。只有父元素设置了透视效果，子元素的z轴的平移效果才能显示。二个值：第一个代表宽，第二个代表高。## scale:设置缩小放大，数值，代表当前元素的宽高的倍数，只写一个值代表水平方向，垂直为0。# transform-style:设置子元素的展示空间。## transform-origin:设置旋转的定点。水平：正值向右，负值向左。垂直：正值向下，负值向上。只写一个值：水平方向。## 取值：preserve-3d 伪3D。
transform: translateY(-100%)偏移实现上滑隐藏导航栏
热门推荐
魏少
07-03 2万+
transform:translateY(100%) 语法： Transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看CSS3中transform的旋转rotate、扭曲skew、缩放scale和移动translate具体如何实现，老样子，我们就从transform的语法开始吧。 语法： transform ： none ; 也就是： tran...
Transform形状变换
我本浪人--游吟世间
09-03 518
Transform形状变换 transform属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行移动、缩放、旋转或倾斜。 ①移动: translate translateX() translateY() translateZ() //有3D效果 translate3d(x,y,z) //有3D效果 简写：translate()——translate(x,y) <...
CSS3 2D转换--扭曲skew
AsaZyf的博客
11-04 377
三种情况： skewX： skew(X)注意点： skew(Y):transform:skewY(angle) skew(X，Y): skew(X，Y)注意点：当只写一个值时，默认y值为0
CSS3学习（十四）：变形
激洪的博客
03-19 275
css 变形
unity鼠标拖动物体在2D平面围绕一个点旋转
06-02
要实现鼠标拖动物体在2D平面围绕一个点旋转，你可以按照以下步骤进行： 1. 将目标物体设置为绕中心点旋转，可以通过设置物体的Pivot点来实现。确保中心点在需要绕其旋转的位置。 2. 编写脚本，获取鼠标移动的方向和距离，并计算出目标物体应该旋转的角度。 以下是示例代码： ```csharp public class RotateObject : MonoBehaviour { Vector3 _mouseReference; Vector3 _mouseOffset; float _rotationX; float _rotationY; public float rotationSpeed = 10f; void OnMouseDown() { _mouseReference = Input.mousePosition; } void OnMouseDrag() { _mouseOffset = Input.mousePosition - _mouseReference; _rotationX += _mouseOffset.x * rotationSpeed * Time.deltaTime; _rotationY -= _mouseOffset.y * rotationSpeed * Time.deltaTime; transform.rotation = Quaternion.Euler(_rotationY, _rotationX, 0); _mouseReference = Input.mousePosition; } } ``` 在上面的代码中，我们使用鼠标的X和Y轴距离来旋转物体，通过修改_rotationX和_rotationY变量，最后使用Quaternion.Euler()将旋转角度转换为旋转四元数，赋值给目标物体的rotation属性即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值