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：One
Arguments 对象: 在函数代码中,使用特殊对象 arguments,开发者无需明确指出参数名,就能访问它们. 例如,在函数 sayHi() 中,第一个参数是 message.用 argumen ...
- JDK8新特性之Optional
Optional是什么 java.util.Optional Jdk8提供Optional,一个可以包含null值的容器对象,可以用来代替xx != null的判断. Optional常用方法 of ...
- 判断页面是否在iframe中，
//判断页面是否在iframe中,是的话就跳出iframe框,多用于登录页 ,将此段代码放到要做判断的页面上即可 if (window != top) { top.location.href = l ...
- 53-Ubuntu-打包压缩-3-gzip压缩和解压缩介绍
gzip tar与gzip命令结合可以实现文件打包和压缩. tar只负责打包文件,但不负责压缩. 用gzip压缩tar打包后的文件,其扩展名一般为xxx.tar.gz. 注:在Linux中,最常见的压 ...
- Window10 64bit Tomcat9 安装
最近正在做一个小项目,需要用到Tomcat部署java web. 准备: 1.window 10 64bit 2.jdk1.8.0_181(请自行安装,记得配置好JAVA_HOME) 3.tomcat ...
- openwrt redis
2071 make V=s 2072 cd build_dir/target-x86_64_uClibc-0.9.33.2/root-x86/ cd package/network/services/ ...
- Wpf 获取指定字体和大小的字符的长宽
Wpf 获取指定字体和大小的字符的长宽 运行环境:Win10 x64, NetFrameWork 4.8, 作者:乌龙哈里,日期:2019-05-09 参考: 章节: 比如一个 Consolas 字体 ...
- Servlet 上传图片
目录 Servlet 上传图片 预备 需求包 pom 前端代码 Servlet 上传图片 预备 需求包 commons-fileupload -用于上传 jstl -用于jsp页面遍历 servlet ...
- 泛型（Generic）接口
泛型接口例子:一个学生有一个独一无二的ID,但是每个学生的姓名不一定是唯一的. class Program { static void Main(string[] args) { Student< ...
- 安装memcached报错：If it's already installed, specify its path using --with-libevent=/dir/
一.安装memcached,执行./configure --prefix=/usr/local/memcached时候报错: 问题:If it's already installed, specify ...