transform的基础使用

2024-05-10 03:57:15

目录

介绍

常用函数

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>

transform的基础使用相关推荐

Transform(CTM,Translate,Rotate,Scale)
前言:Quartz默认采用设备无关的user space来进行绘图,当context(画板)建立之后,默认的坐标系原点以及方向也就确认了,可以通过CTM(current transformation ...
CSS3 3D transform
目录一.transform简介 1.定义和用法 2.浏览器支持 3.语法二. 学习步骤 1. 前情提要 2. 什么是3D transform变换 3. 关键点:rotateX, rotateY, ...
CSS transform变形记
还是那句话,能用CSS实现的就不用JS,下面来一起复习一下CSS transform的基础知识(多图). transform应用场景:实现文字或图像的旋转.缩放.倾斜.移动这四种类型在2D.3D空间的 ...
iOS 初学者功能代码大集合，个人笔记
UitableView cell 高度自适应 Masonry UILabel iOS UI控件 1.UIButton按钮 2.UILabel文本标签 3.UITextField文本输入框 4.UII ...
iOS开发中那些容易被我们忽略的代码，常用代码集合
退回输入键盘 - (BOOL) textFieldShouldReturn:(id)textField{ [textField resignFirstResponder]; } CGRect CGRe ...
数字图像处理——形态学操作(二值图像篇)
形态学操作内容简介 1. 预备知识--结构元 2. 形态学基本操作 2.1 腐蚀和膨胀 2.2 开操作与闭操作 2.3 击中和击不中变换(hit and miss transform) 3. 基本的 ...
玩转iOS开发：5.《Core Animation》CALayer的Transforms
文章转至我的个人博客: https://cainluo.github.io/14777052484078.html 作者感言之前我们所了解的CALayer都是比较抽象化, 好在<Core An ...
知识点归档，博客记录
由于本人能力有限,难免有错,欢迎批评.指正.补充,目录请看右下角 Foundation复习利用category + runtime + 异常的捕获来写一个防止崩溃的框架扩展(Extension) ...
2020 腾讯Techo Park - Flutter与大前端的革命
大家好我是 <Flutter开发实战详解> 的作者郭树煜,很高兴今天有机会在这里和大家分享关于 Flutter 和大前端的话题,今天我主要就从 Flutter .大前端和写作这三个方面给 ...

最新文章

热门文章