马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
今天学习css高级部分中的转换
一.转换
1.什么是转换：改变元素的一些状态，大小、位置、形状，可以是2D的转换，也可以是3D的转换
2D转换：使元素在x轴和y轴上发生变化
3D转换：使元素在x轴、y轴和z轴上发生变化
2.转换属性
css3转换属性：
transform： none/transform-function；
none：不转换，默认值
transform-function：表示要实现转换的函数
1.旋转：rotate（）
2.位移：translate（）
3.缩放：scale（）
transform:rotate（）;---旋转操作
transform:translate（）;--位移操作
transform:scale（）;--缩放操作
3.转换原点：
转换原点：即转换过程中围绕的中心点。默认情况下，原点是在整个元素中心点
更改旋转原点：
属性：transform-origin：
取值：
数值：以元素左上方的点为（0，0），再去计算其他点
百分比： 0%，0%：左上方的点
50%，50% 中心点
关键字：top：
bootom：
left：
right：
center：
left top：表示左上方
transform-origin 赋值：
一个值：x轴方向上移动
两个值：x轴和y轴上
三个值：x轴、y轴和z轴上
- <!DOCTYPE html><!----这是没改变转换原点的旋转--->
- <html>
- <head>
- <title>更改转换原点</title>
- <meta charset="utf-8" />
- <style>
- div{
- width:100px;
- height:100px;
- position:absolute;
- left:200px;
- top:100px;
- }
- #d1{
- border:1px dotted black;
- }
- #d2{
- border:1px solid black;
- background:red;
- transform:rotate(45deg);
- }
- </style>
- </head>
- <body>
- <div id="d1">文本</div>
- <div id="d2">文本</div>
- </body></html>
复制代码
<!----------------------*----------------->
- <!DOCTYPE html><!----这是将旋转原点该为右上角的旋转-->
- <html>
- <head>
- <title>更改转换原点</title>
- <meta charset="utf-8" />
- <style>
- div{
- width:100px;
- height:100px;
- position:absolute;
- left:200px;
- top:100px;
- }
- #d1{
- border:1px dotted black;
- }
- #d2{
- border:1px solid black;
- background:red;
- transform:rotate(45deg);
- transform-origin:right top;
- }
- </style>
- </head>
- <body>
- <div id="d1">文本</div>
- <div id="d2">文本</div>
- </body></html>
复制代码
| 
QQ好友和群
微信头条
运营茶馆
开发交流
微商交流
网罗天下
乐在虔州
生活百科
便民黄页
