CSS新特性之2D转换transform
transform是css3中具有颠覆性特征之一，可以实现元素的位移、旋转、缩放等效果
1.位移translate
1.1语法
transform: translate(x,y);//x,y分别表示x轴和y轴上移动的距离
transform: translateX(n);//x轴上移动的位置
transform: translateY(n);//y轴上移动的位置
1.2举例子
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: pink;
/*transform: translate(100px,100px);*/
/*仅水平方向移动100px*/
/*transform: translateX(100px);*/
/*transform: translate(100px,0);但是y方向的0不可以省略*/
/*仅垂直方向移动100px*/
transform: translateY(100px);
/*transform: translate(0,100px);仅垂直方向移动100px但是x方向的0不可以省略*/
}
</style>
之前学过几种移动盒子的位置的方法：定位、盒子外边距。
现在又有一种新的方法就是translate,translate最大的优点就是不会影响到其他元素的位置。
1.3盒子水平垂直居中对齐
translate()、translateX()、translateY()中的单位除了是像素以外还可以是百分比
translate中的百分比单位是相对于自身元素的宽和高translate:(50%,50%)，利用该方法可以实现盒子水平垂直居中对齐。
(1)结构
<div>
<p></p>
</div>
(2)样式
div {
position: relative;
height: 500px;
width: 500px;
background-color: pink;
}
p {
position: absolute;
top: 50%;
left: 50%;
/*1.以前的写法*/
/*margin-top: -100px;
margin-left: -100px; 100px就是p盒子宽高(200px)的一半*/
/*2.现在的写法*/
transform: translate(-50%,-50%);/*向X轴、Y轴负方向走自身宽度的一半*/
width: 200px;
height: 200px;
background-color: purple;
}
1.4 translate对行内标签没有影响
结构
<span>123</span>
样式
span {
transform: translate(300px,300px);
}
结果会发现123是不会动的
2.旋转rotate
2.1 以图片中心为旋转点的旋转
2D旋转指的是让元素再2维平面内顺时针旋转或者逆时针旋转
语法：
transform: rotate(度数)
重点：
- rotate括号里跟度数，单位是deg,比如rotate(45deg)
- 角度为正时，顺时针，负时，为逆时针
- 默认旋转的中心点是元素的中心点
举例：
<body>
<img src="images/sun.jpg">
</body>
<style type="text/css">
img {
width: 150px;
border-radius: 50%;
border: 5px solid pink;
transition: all 0.3s;
}
img:hover {
transform: rotate(360deg);
}
</style>
案例：三角形，之前三角形箭头都是用字体图标来做的，现在完全可以用代码把这个三角形写出来。
<body>
<div></div>
</body>
<style type="text/css">
div {
position: relative;
width: 249px;
height: 35px;
border: 2px solid #000;
}
div::after {
/*伪元素生成的是一个行内元素*/
content: "";
position: absolute;
top: 9px;
right: 8px;
display: inline-block;
width: 8px;
height: 8px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
transform: rotate(45deg);
transition: all 0.2s;
}
/*鼠标经过div 则里面的三角盒子(after)会旋转*/
div:hover::after {
transform: rotate(225deg);/*45+180*/
}
</style>
2.2 旋转中心点的设置
语法：
transform-origin: x y;
重点：
- 注意后面的参数x和y用空格隔开
- x y默认转换的中心点是元素的中心点（50% 50%）
- 还可以给x y设置像素或者方位名词（top bottom right left center）
案例：让子盒子以旋转180度的方式进入父盒子
<body>
<div></div>
</body>
<style type="text/css">
div {
overflow: hidden;
width: 200px;
height: 200px;
border: 1px solid pink;
margin: 100px auto;
}
div::before {
content: "黑马";
/*伪元素属于行内元素*/
display: block;
width: 100%;
height: 100%;
background-color: hotpink;
transform-origin: left bottom;
transform: rotate(180deg);
transition: all 0.4s;
}
/*鼠标经过div 里面的before复原*/
div:hover::before {
transform: rotate(0deg);
}
</style>
3.缩放scale
控制元素放大 or 缩小
语法：
transform: scale(x,y);
注意：
- 其中的x和y用逗号分隔开
- transform: scale(1,1);详单与宽和高都放大一倍，相当于没有放大
- transform: scale(2,2);宽和高都放大了两倍
- transform: scale(2);只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)
- transform: scale(0.5,0.5);缩小
- scale最大的优势：可以设置转换中心点缩放，默认以中心点缩放。
- scale默认的缩放中心点是center center,缩放中心点是可以改变的。而用width和height放大缩小盒子，会导致盒子的上沿的位置不会变化而往下和两侧沿伸，即缩放中心点只可以是top center且无法改变。
- scale缩放之后不会影响其他盒子的位置，而width和height缩放盒子显然会影响其他盒子的位置。
<body>
<div></div>
123
</body>
<style type="text/css">
div {
height: 100px;
width: 100px;
background-color: pink;
margin: 100px auto;
}
div:hover {
/*scale()括号里面的数字不跟单位 是倍数的意思*/
/*transform: scale(2,2);修改宽高为原来的两倍*/
/*修改宽度为原来的两倍 高度不变*/
/*transform: scale(2,1);*/
/*等比例缩放 同时修改宽度和高度*/
/*transform: scale(2);*/
/*可以进行缩小 小于1就是缩小*/
/*transform: scale(0.5,0.5);*/
/*scale的优势*/
width: 200px;
height: 200px;
}
</style>
设置缩放中心点
<div></div>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: pink;
margin: 100px auto;
transform-origin: left bottom;
}
div:hover {
transform: scale(2);
}
</style>
案例：鼠标经过向四周放大图片
<body>
<div><a href="#"><img src="images/adv.jpg"></a></div>
<div><a href="#"><img src="images/adv.jpg"></a></div>
<div><a href="#"><img src="images/adv.jpg"></a></div>
</body>
<style type="text/css">
div {
overflow: hidden;
float: left;
margin: 10px;
}
img {
transition: all .2s;
}
img:hover {
transform: scale(1.1);
}
</style>
案例：分页按钮，鼠标经过按钮则按钮放大
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<style type="text/css">
li {
float: left;
width: 30px;
height: 30px;
border: 1px solid pink;
margin: 10px;
text-align: center;
line-height: 30px;
list-style: none;
border-radius: 50%;
cursor: pointer;
transition: all .2s;
}
li:hover {
transform: scale(1.2);
}
</style>
4. 2D转换综合写法
注意：
- 同时使用多个转换，其格式为：transform: translate() rotate() scale() ...等
- 其顺序会影响转换的效果。（先旋转会改变坐标轴方向）
- 当同时有位移和其他属性的时候，记得将位移放到最前面。
<body>
<div></div>
</body>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: pink;
transition: all .5s;
}
div:hover {
transform: translate(150px, 50px) rotate(180deg) scale(1.2);
/*以下两句话是不一样的*/
/*transform: translate(150px, 50px) rotate(180deg);*/
/*transform: rotate(180deg) translate(150px, 50px);*/
}
</style>
补充：以下内容是对先移动再旋转和先旋转再移动导致的不同效果的进一步体会
先移动再旋转
1.原图如下：
2.先沿着x轴正方向移动150px,得到如下效果图
3.再沿着当前粉色盒子的中心顺时针旋转45度，得到如下效果图
先旋转再移动
1.原图如下：
2.沿着当前粉色盒子中心顺时针旋转45度
3.再沿着当前"粉色盒子"的x轴的正方向移动150px(不是沿着黑色盒子上边框，而是沿着当前粉色盒子的上边框(斜的)移动150px)
综上所述：粉色盒子在哪，x轴和y轴就在哪
CSS新特性之2D转换transform的更多相关文章
- CSS新特性之3D转换
1. 三维坐标系 x轴:水平向右(右边是正,左边是负) y轴:垂直向下(向下是正,向上是负) z轴:垂直屏幕(向外是正,向里是负) 2. 3D转换 3D转换中最常用的是3D位移和3D旋转.主要知识点如 ...
- CSS新特性（3D转换，perspective（透视），transfrom-style（子元素是否开启三维环境））
1. 三维坐标系(里面的值不能省略,没有就写 0 ) x 轴:水平向右 注意:x 右边是正值,左边是负值 y轴: 垂直向下 注意:y 下面是正值,上面是负值 z轴:垂直屏幕 注意: ...
- 2017 css新特性
2017年要学习的三个CSS新特性 这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东 ...
- css3 新特性（2D translate 移动，rotate 旋转 ， scale 缩放）
1.transform(转换)可以实现元素的位移,旋转,缩放等效果(可以简单理解为变形) 移动:translate 旋转:rotate 缩放:scale 2. ...
- CSS3新特性—过渡、转换
过渡 转换 2D转换 2D转换包括四个方面:位移,缩放,旋转,倾斜 位移[让元素移动位置] transform: translate(100px,100px); 备注: 1. 如果只设置一个值,那么代 ...
- 2017年学习的三个CSS新特性
这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东西要学习.尽管CSS有很多新的特性, ...
- 【译】2017年要学习的三个CSS新特性
这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东西要学习.尽管CSS有很多新的特性, ...
- 2017年要学习的三个CSS新特性
这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东西要学习.尽管CSS有很多新的特性, ...
- （十一）Unity5新特性----实战2D游戏
孙广东 2015.7.11 在本教程中,将了解到U5新功能.你通过本教程.您将了解下面内容: Changes in Component Access Physics Effectors Adding ...
随机推荐
- CSAPP：代码优化【矩阵运算】
编程除了使程序在所有可能的情况下都正确工作,还需要考虑程序的运行效率,上一节主要介绍了关于读写的优化,本节将对运算的优化进行分析.读写优化 编写高效程序需要做到以下两点: 选择一组合适的算法和数据结构 ...
- Unity资源加载路径及加载方式小结
Unity3D中的资源路径路径属性 路径说明Application.dataPath 此属性用于返回程序的数据文件所在文件夹的路径.例如在Editor中就是Assets了.Application.st ...
- Linux系统运行级别和关机重启命令介绍
Linux系统运行级别介绍 Linux系统有七种运行级别(Run Level),各个运行级别下,系统有不同的状态,各个级别的意义描述如下. 0:关键级别1:单用户运行级别,运行rc.sysinit和r ...
- 【暂时停更】Gungame更新下载平台
v1.0: 这是本游戏的第一个版本, 制作于2019.4.12. 控制 : Player1: wsad为移动, r键开炮(有朝向限制) Player2: ikjl为移动, p键开炮(有朝向限制) 下载 ...
- [考试反思]0819NOIP模拟测试26：荒芜
这么正式的考试,明天应该就是最后一次了吧 然而..今天,我仍然没能抓住机会 RNBrank1:.skyh还是稳.外校gmk拿走第三. 四五六名都是63-64.第七50.第八39.我和三个并列的是第九. ...
- EXISTS的用法介绍
比如在Northwind数据库中有一个查询为 SELECT c.CustomerId,CompanyName FROM Customers c WHERE EXISTS( SELECT OrderID ...
- ES6，import时如何正确使用花括号'{ }'
在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种.前者用于服务器,后者用于浏览器.ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取 ...
- 领扣（LeetCode）数字转换为十六进制数 个人题解
给定一个整数,编写一个算法将这个数转换为十六进制数.对于负整数,我们通常使用 补码运算 方法. 注意: 十六进制中所有字母(a-f)都必须是小写. 十六进制字符串中不能包含多余的前导零.如果要转化的数 ...
- C语言程序设计100例之（17）：百灯判亮
例17 百灯判亮 问题描述 有序号为1.2.3.….99.100的100盏灯从左至右排成一横行,且每盏灯各由一个拉线开关控制着,最初它们全呈关闭状态.有100个小朋友,第1位走过来把凡是序号为1的 ...
- 从cocos2dx源代码看android和iOS跨平台那些事
cocos2dx一个跨移动(平板)平台的游戏引擎,支持2d和3d,基于c/c++,网上介绍多在此不详叙.我们本篇关心的是跨平台那些事,自然而然就找到platform目录.好家伙,支持的操作平台还真不少 ...