-
css教程之perspective-origin [透视原点]
- 2017-05-26 18:36 来源:www.js333com
语法
perspective-origin: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] ;
语法项目 | 说明 |
---|---|
初始值 | 50% 50% |
适用于 | 块元素和行内元素 |
可否继承 | 否 |
取值 | 长度值 |
媒介 | 视觉 |
版本 | CSS3.0 |
说明
perspective-origin属性定义在X轴和Y轴的3D元素。这个属性允许你改变3D元素的底部位置。定义时的perspective-origin属性,它是一个元素的子元素,透视图,而不是元素本身。
提示:使用此属性必须和perspective属性一起使用,只影响3D转换的元素!
受影响变形函数:perspective()。
取值
该属性提供2个参数值,第一个用于横坐标,第二个用于纵坐标;如果只提供一个,该值将用于横坐标,纵坐标将默认为50%。
percentage:用百分比指定坐标值。可以为负值。
length:用长度值指定坐标值。可以为负值。
left,center right是水平方向取值,而top center bottom是垂直方向的取值。
实例代码
CSS
- .demo_box{
- position:relative;
- background:#4d6ea6;
- margin:100px auto;
- -webkit-animation:demo_box 4s infinite linear;
- -moz-animation:demo_box 4s infinite linear;
- }
- .demo_box:hover{
- -webkit-animation-play-state:paused;
- -moz-animation-play-state:paused;
- }
- .mod_run_code{
- -webkit-perspective-origin:right top;
- -moz-perspective-origin:right top;
- -moz-transform-style:preserve-3d;
- -webkit-transform-style:preserve-3d;
- -webkit-transform: perspective(500px);
- -moz-transform: perspective(500px);
- }
- @-webkit-keyframes demo_box{
- 0%{-webkit-transform:rotateX(0deg);}
- 100%{-webkit-transform:rotateX(360deg);}
- }
- @-moz-keyframes demo_box{
- 0%{-moz-transform:rotateX(0deg);}
- 100%{-moz-transform:rotateX(360deg);}
- }
复制
HTML
运行一下 »- <div class="demo_box">默认的透视原点%</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