-
css教程之transform-origin [变形原点]
- 2017-05-25 23:45 来源:www.js333com
语法
transform-origin: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ]
语法项目 | 说明 |
---|---|
初始值 | center center,效果等同于 50% 50% |
适用于 | 块元素和行内元素 |
可否继承 | 否 |
媒介 | 视觉 |
版本 | CSS3.0 |
说明
transform的参照点默认为元素的中心点,如果要改变这个参照点,可以是用transform-origin属性进行自定义。
受影响变形函数:rotate()。
取值
该属性提供2个参数值,第一个用于横坐标,第二个用于纵坐标;如果只提供一个,该值将用于横坐标,纵坐标将默认为50%。
percentage:用百分比指定坐标值。可以为负值。
length:用长度值指定坐标值。可以为负值。
left center right是水平方向取值,而top center bottom是垂直方向的取值。
实例代码
CSS
- .origin_1{
- -webkit-transform-origin:center center;
- -moz-transform-origin:center center;
- -webkit-transition:0.5s ease all;
- -moz-transition:0.5s ease all;
- position:absolute;
- left:10px;
- top:50px;
- }
- .origin_2{
- -webkit-transform-origin:left top;
- -moz-transform-origin:left top;
- -webkit-transition:0.5s ease all;
- -moz-transition:0.5s ease all;
- position:absolute;
- left:250px;
- top:50px;
- }
- .origin_3{
- -webkit-transform-origin:100% 100%;
- -moz-transform-origin:100% 100%;
- -webkit-transition:0.5s ease all;
- -moz-transition:0.5s ease all;
- position:absolute;
- left:480px;
- top:50px;
- }
- .origin_4{
- -webkit-transform-origin:20px 60px;
- -moz-transform-origin:20px 60px;
- -webkit-transition:0.5s ease all;
- -moz-transition:0.5s ease all;
- position:absolute;
- left:250px;
- top:160px;
- }
- .origin_1:hover,
- .origin_2:hover,
- .origin_3:hover,
- .origin_4:hover{
- -webkit-transform:rotate(45deg);
- -moz-transform:rotate(45deg);
- }
复制
HTML
运行一下 »- <div class="demo_box origin_1">在中心点旋转45度</div>
- <div class="demo_box origin_2">在左上角旋转45度</div>
- <div class="demo_box origin_3">用百分百值来来设置旋转点旋转45度</div>
- <div class="demo_box origin_4">用长度值来设置旋转点旋转45度</div>
复制
兼容性
IE | Firefox | Opera | Safari | Chrome |
---|---|---|---|---|
IE 10+ | Firefox 3.5+ | Opera 11.50+ | Safari 10+ | Chrome 2.0+ |
最新更新
C#教程之MailKit使用IMAP读取邮件找不到附件
C#教程之C# DataTable下载
C#教程之Unity3D Input按键系统
C#教程之类型转换一种处理方式
C#教程之c#根据路径(url)下载图片
C#教程之.NET(WinCE、WM)转Android开发——
C#教程之C# 获取当前服务器运行程序的根
C#教程之新品成熟EMR源码电子病历系统软
C#教程之.net 操作excel
Unity3D开发游戏世界天空盒
JavaScript教程之Mac安装vue
JavaScript教程之nodejs + webpack4 + babel6 结合写
JavaScript教程之Clean Code之JavaScript代码示例
JavaScript教程之AJAX调用数据,滚动到底部
JavaScript教程之聊聊 Vue 中 title 的动态修改
JavaScript教程之使用JavaScript获取url中的参
JavaScript教程之前端之json,ajax和jsonp
JavaScript教程之electron——ipcMain模块、ip
JavaScript教程之前端之移动端库和框架bo
JavaScript教程之大项目之网上书城(三)—
access数据库之随说秋色园从Access升迁到
access数据库之微信公众平台开发(26) ACCE
access数据库之ACCESS TOKEN
access数据库之当爬虫被拒绝时(Access Deni
access数据库之当爬虫被拒绝时(Access Deni
access数据库之使用PowerDesigner生成Access数据
access数据库之让ADO.NET Entity Framework 支持
access数据库之Web API与OAuth:既生access to
access数据库之[认证 & 授权] 6. Permissi
access数据库之[认证 & 授权] 6. Permissi