CSS3 transform-origin 属性

最新推荐文章于 2024-07-07 13:22:35 发布

iteye_468

最新推荐文章于 2024-07-07 13:22:35 发布

阅读量102

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/iteye_468/article/details/82649228

版权

CSS3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
  position: relative;
  height: 200px;
  width: 200px;
  margin: 100px;
  border: 1px solid black;
}
    #div2
{
  width:10px;
  height:10px;
  position: absolute;
  border: 1px solid black;
  background-color: red;
  transform: rotate(45deg);
  transform-origin:0 200px;
  -ms-transform: rotate(45deg); /* IE 9 */
  -ms-transform-origin:0 200px; /* IE 9 */
  -webkit-transform: rotate(45deg); /* Safari and Chrome */
  -webkit-transform-origin:0 200px; /* Safari and Chrome */
}
  </style>
</head>
<body>
<div id="div1">
  <div id="div2"></div>
</div>
</body>
</html>
//运行结果是：
transform-origin:如果以百分比定义原点那么就是以子集本身宽度的百分比而定义的位置，如果是以
像素单位定义的原点，那么就是以其父级元素为基准点而定义的原点。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

iteye_468

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 transform-origin 属性

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;style&gt;#div1{ position: relative; height: 200px; width: 200px; margin: 100px; border: 1px solid black;} #div2{...
复制链接

扫一扫