css3 rotation-point属性笔记

原创 国哥笔记  2019-03-16 14:51  阅读 274 views 次

在css中,rotation-point属性是使用来定义从上左边框边缘进行偏移的点,属性值是一对值。该属性需要与rotation属性一起使用,用来逆时针旋转元素。

rotation-point属性是css3中新增的属性,目前主流浏览器都还不支持该属性。

rotation-point属性语法格式

  1. css语法:rotation-point: left top/left center/left bottom/right top/right center/right bottom/center top/center center/center bottom/x% y%;
  2. JavaScript语法:object.style.rotationPoint="25% 25%";

属性值说明

  • left top:左上角;
  • left center:左中;
  • left bottom:左下角;
  • right top:右上角;
  • right center:右中;
  • right bottom:右下角;
  • center top:上中;
  • center center:元素中心;
  • center bottom:下中;
  • x% y%:百分比值,参考边框盒宽度和高度;
如果只规定一个关键词,则第二个值将是"center"。

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 rotation-point属性笔记</title>
<style type="text/css">
h1{rotation-point:50% 50%;rotation:180deg;}
</style>
</head>
<body>
<h1>rotation-point结合rotation属性旋转效果</h1>
<p>目前没有浏览器支持 rotation-point或 rotation-point!</p>
</body>
</html>

运行结果:

目前没有浏览器支持 rotation-point属性,暂无运行结果!

 

更多css属性请移步到——>css属性大全

本文地址:https://www.ggbiji.com/css-rotation-2.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情