css---2D变形
1.transfrom:rotate(360deg); 用前要加transition: 2s; deg重点
transform:rotate(angle);
正值:顺时针旋转 rotate(360deg)
负值:逆时针旋转 rotate(-360deg)
只能设单值。正数表示顺时针旋转，负数表示逆时针旋转
transform: rotate(360deg);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#test{
width: 200px;
height: 200px; border:3px solid red;
background: pink;
text-align: center;
font: 20px/200px "微软雅黑" ; position: absolute;
left: ;
right: ;
bottom: ;
top: ;
margin: auto;
transition: 2s; }
html{
height: %;
}
html body{
height: %;
border: 3px solid yellow;
margin-top: 100px; }
body:hover #test{
transform: rotate(360deg);
} </style> </head>
<body>
<div id="test">
transform
</div>
</body>
</html>
tansation：rotate
X方向平移:transform: translateX(tx)
Y方向平移:transform: translateY(ty)
二维平移：transform: translate(tx[, ty])； 如果ty没有指定，它的值默认为0。
可设单值，也可设双值。
正数表示XY轴正向位移，负数为反向位移。设单值表示只X轴位移，Y轴坐标不变，
例如transform: translate(100px);等价于transform: translate(100px,0);
transform:translateX(300px);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#test{
width: 200px;
height: 200px; border:3px solid red;
background: pink;
text-align: center;
font: 15px/200px "微软雅黑" ; position: absolute;
left: ;
right: ;
bottom: ;
top: ;
margin: auto;
transition: 2s; }
html{
height: %;
}
html body{
height: %;
border: 3px solid yellow;
margin-top: 100px; }
body:hover #test{
transform:translateX(300px);
} </style> </head>
<body>
<div id="test">
transform:translateX(300px);
</div>
</body>
</html>
tranlateX
倾斜 skew
X方向倾斜:transform: skewX(angle)
skewX(45deg):参数值以deg为单位 代表与y轴之间的角度
Y方向倾斜:transform: skewY(angle)
skewY(45deg):参数值以deg为单位 代表与x轴之间的角度
二维倾斜:transform: skew(ax[, ay]); 如果ay未提供，在Y轴上没有倾斜
skew(45deg,15deg):参数值以deg为单位 第一个参数代表与y轴之间的角度
第二个参数代表与x轴之间的角度
单值时表示只X轴扭曲，Y轴不变，如transform: skew(30deg);等价于 transform: skew(30deg, 0);
考虑到可读性，不推荐用单值，应该用transform: skewX(30deg);。skewY表示 只Y轴扭曲，X轴不变
正值:拉正斜杠方向的两个角
负值:拉反斜杠方向的两个角
transform:skewX(45deg);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#test{
width: 200px;
height: 200px; border:3px solid red;
background: pink;
text-align: center;
font: 15px/200px "微软雅黑" ; position: absolute;
left: ;
right: ;
bottom: ;
top: ;
margin: auto;
transition: 2s; }
html{
height: %;
}
html body{
height: %;
border: 3px solid yellow;
margin-top: 100px; }
body:hover #test{
transform:skewX(45deg);
} </style> </head>
<body>
<div id="test">
transform:skewX(45deg);
</div>
</body>
</html>
Skew
缩放Scale
transform:scale(2);
X方向缩放:transform: scaleX(sx);
Y方向缩放:transform: scaleY(sy);
二维缩放 :transform: scale(sx[, sy]); (如果sy 未指定，默认认为和sx的值相同)
要缩小请设0.01～0.99之间的值，要放大请设超过1的值。
例如缩小一倍可以transform: scale(.5);
放大一倍可以transform: scale(2);
如果只想X轴缩放，可以用scaleX(.5)相当于scale(.5, 1)。
同理只想Y轴缩放，可以用scaleY(.5)相当于scale(1, .5)
正值:缩放的程度
负值:不推荐使用（有旋转效果）
单值时表示只X轴,Y轴上缩放粒度一样，如transform: scale(2);等价于transform: scale(2,2);
transform:scale();
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#test{
width: 200px;
height: 200px; border:3px solid red;
background: pink;
text-align: center;
font: 15px/200px "微软雅黑" ; position: absolute;
left: ;
right: ;
bottom: ;
top: ;
margin: auto;
transition: 2s; }
html{
height: %;
}
html body{
height: %;
border: 3px solid yellow;
margin-top: 100px; }
body:hover #test{
transform:scale();
} </style> </head>
<body>
<div id="test">
transform:scale();
</div>
</body>
</html>
scale
基点的转换 transform-origin:left top;
transform-origin: left top;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#test{
width: 200px;
height: 200px; border:3px solid red;
background: pink;
text-align: center;
font: 15px/100px "微软雅黑" ; position: absolute;
left: ;
right: ;
bottom: ;
top: ;
margin: auto;
transition: 2s;
transform-origin: left top; }
html{
height: %;
}
html body{
height: %;
border: 3px solid yellow;
margin-top: 100px; }
body:hover #test{
transform:rotate(360DEG);
} </style> </head>
<body>
<div id="test">
transform-origin: left top;基点转换
</div>
</body>
</html>
transform-origin
css---2D变形的更多相关文章
- CSS 2D 转换
通过CSS 2D转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 2D转换一共五个属性:transfrom=> translate(X轴数值px,Y轴数值px):元素从其当前位置移动,根据 ...
- 【CSS3练习】transform 2d变形实例练习
transform 2d变形实例练习:练习了旋转 倾斜 缩放的功能 <!DOCTYPE html> <html lang="en"> <head> ...
- CSS3——2D变形和3D变形
2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能 ...
- css3的2D变形
一.2D变形 1.变形 transform:translate();translateX();translateY();translate(,); 2.过渡 transition:all 1s; 二. ...
- CSS3(3)---2D变形(transform)
CSS3(3)---2D变形(transform) 2D变形是CSS3中具有颠覆性的特征之一,它常用的属性有:移动(translate).缩放(scale).旋转(rotate).倾斜 (skew). ...
- 1+X证书学习日志——css 2D&过渡
css 位移常用属性 transform:translate(x,y): transform:translateX(); transform:translateY(); 旋转属性 2d旋转: tran ...
- css 2D转换 transform-rotate 画插图
学习了一点2D转换,关于Transfrom-rotate的小用法 rotate()方法,在一个给定度数顺时针旋转的元素.负值是允许的,这样是元素逆时针旋转. 下面看实例 第一个例子是没有使用rotat ...
- css 2D转换总结
CSS中2D转换的形式是这样的: 选择器{ transform:转换函数(参数,参数): } 其中transform(是transform 不是transfrom)定义元素的2D或者3D转换: 2D转 ...
- CSS 2D转换
转换是使元素改变形状.尺寸和位置的一种效果.通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸,可以大致分为2D转换和3D转换.下面介绍的是2D转换的相关知识点. 首先,CSS中2D ...
- css之变形（transform）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- js基本包装类型
基本包装类型 3种特殊的引用类型 为了便于操作基本类型值,es还提供了3种特殊的引用类型: Boolean,Number,String. 每当读取一个基本类型值的时候,后台就会创建一个对应的基本包 ...
- C# WinfForm 控件之dev图表 ChartControl
dev 图表控件 学习连接 新建一个winformApp form1上放一个button 再放一个chartControl Name 为cct 直接上代码 private void button1_C ...
- ASP.net简单分页
//控制器 //实例化实体 TestEntities1 test =new TestEntities1(); //定义页数 int pageIndex; //查看接收的页数 如果不能转 则重置为1 i ...
- 天道神诀--IPSAN(iscsi配置)
数据存储技术 DSA(Direct Attacted Storage 直接附加存储)本地硬盘 NAS(Network Attacted Storage 网络附加存储)网络服务共享:文件夹 SAN(St ...
- jetson更换源
参考链接:https://blog.csdn.net/qq_36396941/article/details/88903094 Nano的镜像默认是国外的源,速度很慢,国内的源有的上不去,有的包无法安 ...
- 搭建一个自己的SVN服务器
其实方法非常简单,点点鼠标就好了. 上网搜索“VisualSVN Server”,一般来说都是会找到 https://www.visualsvn.com/server/ 这个网站的. 点击上边的Dow ...
- linux 7 添加永久路由方法
linux 7 添加永久路由 用route命令添加 仅仅是当前状态下生效,一旦重启就会失效. 所以要在/etc/sysconfig/network-scripts/这个路径下添加一个文件route-{ ...
- LGV定理 (CodeForces 348 D Turtles)/(牛客暑期多校第一场A Monotonic Matrix)
又是一个看起来神奇无比的东东,证明是不可能证明的,这辈子不可能看懂的,知道怎么用就行了,具体看wikihttps://en.wikipedia.org/wiki/Lindstr%C3%B6m%E2%8 ...
- Linux下Qt调用共享库文件.so
修改已有的pro文件,添加如下几句: INCLUDEPATH += /home/ubuntu/camera/camera/LIBS += -L/home/ubuntu/camera/camera -l ...
- leetcood学习笔记-69-x的平方根
题目描述: 第一次提交:(会超时) class Solution: def mySqrt(self, x: int) -> int: if x==0 or x==1: return x for ...