css3 transform-origin属性允许您更改转换元素的位置

原创 国哥笔记  2019-03-21 10:15  阅读 595 views 次

transform-origin属性定义及用法

在css中,transform-origin属性是使用来允许您更改转换元素的位置,2D转换元素可以改变元素的X和Y轴;3D转换元素,还可以更改元素的Z轴。该属性必须和transform属性一起使用,不然没有效果。

transform-origin属性是css3中新增的属性,目前有Internet Explorer 10、Firefox、Opera支持 该属性,但Opera浏览器只支持2D转换。Internet Explorer 9支持替代的-ms-transform-origin属性,但只支持2D转换;Safari浏览器和Chrome浏览器支持替代的-webkit-transform-origin属性。

transform-origin属性语法格式

  1. css语法:transform-origin: x-axis y-axis z-axis;
  2. JavaScript语法:object.style.transformOrigin="20% 40%";

属性值说明

  • x-axis:定义视图被置于X轴的何处,可以是:left、center、right、length、%;
  • y-axis:定义视图被置于Y轴的何处,可以是:、top、center、bottom、length、%;
  • z-axis:定义视图被置于Z轴的何处,可以是:length;

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 transform-origin属性允许您更改转换元素的位置</title>
<style type="text/css">
#div1{
position: relative;
height: 200px;width: 200px;
margin: 100px;
padding:10px;
border: 1px solid black;
}
#div2{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
}
</style>
</head>
<body>
<div id="div1">
  <div id="div2">HELLO</div>
</div>
</body>
</html>

运行结果:

transform-origin属性允许您更改转换元素的位置

 

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

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

发表评论


表情