transform的基础使用

已于 2023-01-13 22:19:24 修改
阅读量2.7k 收藏 20
点赞数 2
分类专栏： html 文章标签： html
于 2022-10-16 12:01:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63482686/article/details/127341212
版权

目录

介绍      

常用函数

        rotate代码

        skew代码     

        skewX代码

        skewY代码

        scanle代码

        scaleX代码

        scaleY代码

        translate代码

        translateX

​        translateY代码

​        matrix代码

介绍      

  css3的transform属性允许我们对元素进行旋转，缩放，移动或者倾斜，对元素应用2D或3D的转换。

        transform属性的基础语法如下：

        transform：none  |  transform-functions；

        在上述语法中，transform属性的默认值是none，适用于内联元素和块元素，表示不会进行变形。transform-functions用于变形函数，可以是一个或是多个变形函数列表。

常用函数

函数名描述参数说明
rotate(angel)旋转元素angle是度数值，代表旋转角度
skew(x-angel,y-angel)倾斜元素angle是倾斜角度，代表倾斜角度
skewX(angel)沿x轴倾斜元素angle是倾斜角度，代表倾斜角度
skewY(angel)沿y轴倾斜元素angle是倾斜角度，代表倾斜角度
scale(x,y)缩放元素，改变元素的高度和宽度代表缩放比例，取数包括正数，负数和小数
scaleX(x)改变元素宽度代表缩放比例，取数包括正数，负数和小数
scaleY(y)改变元素高度代表缩放比例，取数包括正数，负数和小数
translate(x,y)移动元素对象，基于x和y坐标重新定位元素元素移动的数值，x代表左右方向，y代表上下方向，向左和向上用负。
translateX(x)沿着x轴移动元素元素移动的数值
translateY(y)沿着y轴移动元素

元素移动的数值

matrix(n,n,n,n,n,n)2D转换矩阵使用六个值的表示变形，所有变形的本质都是由矩阵完成的。

        rotate代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            left: 500px;
            top: 500px;
            background: black;
            /*transform代码使用*/
            position: absolute;
            transform: rotate(150deg);
        }
    </style>
</head>
<body>
<div id="box"></div>
</body>
</html>

正常的

        skew代码     

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            position: absolute;
            left: 500px;
            top: 500px;
            background: black;


            transform: skew(10deg,0deg);
        }
    </style>
</head>
<body>
<div id="box"></div>
</body>
</html>

正常的

        skewX代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            position: absolute;
            left: 500px;
            top: 500px;
            background: black;

            transform: skewX(-30deg);
        }
    </style>
</head>
<body>
<div id="box"></div>
</body>
</html>

 正常的

        skewY代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            position: absolute;
            left: 500px;
            top: 500px;
            background: black;

            transform: skewY(30deg);
        }
    </style>
</head>
<body>
<div id="box"></div>
</body>
</html>

 正常的

        scanle代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            position: absolute;
            left: 500px;
            top: 500px;
            background: black;

            transform: scale(1,2);
        }
    </style>
</head>
<body>
<div id="box"></div>
</body>
</html>

        scaleX代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            position: absolute;
            left: 500px;
            top: 500px;
            background: black;

            transform: scaleX(2);
        }
    </style>
</head>
<body>
<div id="box"></div>
</body>
</html>

        scaleY代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            position: absolute;
            left: 500px;
            top: 500px;
            background: black;

            transform: scaleY(2);
        }
    </style>
</head>
<body>
<div id="box"></div>
</body>
</html>

        translate代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0px;
            top: 0px;
            background: black;

            transform: translate(100px,100px);
        }
    </style>
</head>
<body>
<div id="box"></div>
</body>
</html>

 

正常的

        translateX

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0px;
            top: 0px;
            background: black;

            transform: translateX(100px);
        }
    </style>
</head>
<body>
<div id="box"></div>
</body>
</html>

正常的

        translateY代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0px;
            top: 0px;
            background: black;

            transform: translateY(100px);
        }
    </style>
</head>
<body>
<div id="box"></div>
</body>
</html>

 

正常的

       matrix代码

        简单的解析:

        matrix(a,b,c,d,e,f)，算了太多了，我给链接给你们看吧

        讲的原理很好的：https://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%e7%9f%a9%e9%98%b5/https://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/

        直接方便运用的：
https://www.jianshu.com/p/956d54376338https://www.jianshu.com/p/956d54376338

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            position: absolute;
            left: 100px;
            top: 100px;
            background: black;
            /*这只是其中一种，就是保持x不变，y变大两倍*/
            transform: matrix(1,0,0,2,0,0);
        }
    </style>
</head>
<body>
<div id="box"></div>
</body>
</html>

 

鸦哈
关注
  • 2
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
transform的使用：
qq_29704567的博客
04-10 5318
transform属性 可以使元素进行缩放、平移、旋转等2D、3D的变换 语法： transform: none/transform-function; 参数： translate(x,y) 定义2D转换，表示在x轴和y轴上进行平移 translate3d(x,y,z) 定义3D转换 translateX(x) 表示在x轴上进行平移 translateY(y)...
transform用法
zhongkeli的专栏
11-05 2259
transform function template template OutputIterator transform ( InputIterator first1, InputIterator last1, OutputIterator result, UnaryOperator op ); t
Transform【变形】属性
精彩人生
02-11 6174
来源：http://www.w3cplus.com/content/css3-transform 今天开始我们一起来学习有关于CSS3制作动画的几个属性：变形(transform)、转换(transition)和动画(animation)等更高级的CSS3技术。本文主要介绍的是这三个属性之中的第一个──变形transform。 Transform字面上就是变形，改变的意思。在CSS3中tr
transform详解
最新发布
weixin_41012399的博客
08-01 716
transform的attention也是需要用权重代表重要程度，输入*权重=输出，再用输出和label计算loss，transform的权重是通过自注意力机制（Q，K，V）计算得到的。transformer：输入，位置编码，编码器（attention，前馈网络），解码器（attention，前馈网络，mask），loss，反向传播，优化器。通过embedding层得到三个token的embedding，假定分别为：[1, 0, 1, 0]，[0, 2, 0, 2]，[1, 1, 1, 1]
transform的使用
X201805的博客
12-17 933
tranform通常用于制作动画效果，比如页面中的平移，旋转。还能制作3D效果的旋转。
一文学会Android Gradle Transform基础使用
weixin_51628367的博客
01-06 488
概述 最近在做一个在 Android 工程编译期间动态插入一些随机代码的需求，我选择的是 Gradle Transform 技术，想起好久没有写过博客了，就记录一下这方面的一些基本使用。 一般来说，在 Android 工程的编译期间可以通过一些技术来动态插入一些代码逻辑甚至生成一些新的 Class 类，具体技术有： APT(Annotation Processing Tool): 编译期注解处理技术，通过自定义注解和注解处理器来实现编译期生成代码的功能，并且将生成的代码和源代码一起编译成 class 文件
unity基础 -transform组件
08-11
sChildOf(Transform parent) 此方法用于...掌握Transform组件的使用是Unity开发的基础，它提供了控制游戏对象运动、旋转和缩放的关键功能。理解并熟练运用这些属性和方法，可以有效地创建和操纵游戏世界中的各种元素。
coords_transform库原理及使用方法1
08-04
在实际应用中，`coords_transform`库可以用于处理从GPS设备获取的原始WGS84坐标，将其转换为适合在中国地图服务中使用的GCJ02或BD09坐标。同时，该库也可以帮助将地图服务返回的坐标转换回WGS84，以便与其他基于WGS...
Runtime Transform Handles
04-26
- Unity官方文档：学习Unity的基础知识和Transform组件的使用。 - Unity Asset Store：寻找和下载已经实现Runtime Transform Handles的第三方插件，以便快速集成到项目中。 - GitHub：查找开源实现，了解代码结构和...
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
09-28
在本教程中，我们将探讨如何使用CSS3的`transform`属性和3D转换来创建一个动态3D立方体。这个立方体可以通过键盘上的上下左右键进行翻转和旋转，为用户带来炫酷的视觉体验。 首先，HTML结构是立方体的基础。在示例...
transform使用详解
yapian8的专栏
04-25 1387
文件原型及可能的实现：版本一：template<class InputIt, class OutputIt, class UnaryOperation> OutputIt transform(InputIt first1, InputIt last1, OutputIt d_first, UnaryOperation unary_op) { while (first1 != last1)
transform的基本使用和常用特效
qq_61943848的博客
08-11 4334
先介绍2D转换的transform的基本使用：移动：translate、旋转：rotate、缩放：scale。可分为2D转换的transform和3D转换transform的使用，可以实现元素的移动、旋转、收缩等效果。transform：translate() rotate() scale()有位移先写位移，空格隔开。ranslate最大的优点就是不会影响其他元素 ，不像边距和定位会影响，但对行内元素无效。rotate鼠标滑过翻转效果。用rotate做个三角形箭头。三、2D转换之： 缩放。......
css3中transform属性及用法
前端岚枫
02-10 2260
通过transform属性来实现transform的各种变形处理功能。一般Safari3.1以上浏览器、Google Chrome 8以上的浏览器、Firefox 4 以上的浏览器及Opera 10以上的浏览器都支持该属性，不过在样式代码中,在使用Safari或者Chrome浏览器要书写成“ -webkit-transform”；在使用Firefox浏览器时，需要书写成" -moz-transfo
使用CSS transform属性画一个静态正方体
笑到根本停不下来的Kathy思的博客
05-23 166
使用CSS transform属性画一个静态正方体
Transform - Functions
互动教程网[www.hdjc8.com]
02-21 1011
Functions  Translate (translation : Vector3, relativeTo : Space=Space.Self) : void   平移物体，space可以是Self和World，这个不用说了吧  Rotate (eulerAngles : Vector3, relativeTo : Space = Space.Self) : void  绕欧拉角
transform
尊哥的博客
09-03 2800
transform属性向元素应用 2D 或 3D 转换。允许我们对元素进行旋转、缩放、移动或倾斜。 Internet Explorer 10、Firefox、Opera 支持 transform 属性。 Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。 Safari 和 Chrome 支持替代的 -webkit-transform...
tranform中的skew属性讲解
曾大强博客
02-18 461
1.随着目前ui组件库越来越多，我们大部分的前端小伙伴只需要注重功能的实现，样式部分反而是这部分小伙伴最薄弱的地方，当然，我目前也是这部分人，每天写的最多的东西就是毫无营养的业务代码，最近也是在缕css3中的内容，对于一些图形变化的属性还是蛮感兴趣的，例如常用三大css属性，transition, transform,animate等图形变换的属性使用。首先了解图形变化前的起始位置，搞清楚这个最重要，因为css中定义dom模型位置是从，左上角开始，水平方向为（y) 轴，垂直方向为 (x) 轴。
CSS变形transform
橘猫吃不胖的博客
11-07 1257
CSS变形1 认识transform2 2D转换2.1 transform用法2.2 变形函数transform-function2.2.1 matrix()定义矩形变换2.2.2 translate()移动元素对象2.2.3 scale()缩放元素对象2.2.4 rotate()旋转元素对象2.2.5 skew()倾斜元素对象2.3 transform-origin中心点3 3D转换3.1 rotateX()指定元素围绕X轴旋转3.2 rotateY()指定元素围绕Y轴旋转 1 认识transform 2
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值