CSS3 transform-origin 设置旋转元素的基点位置

最新推荐文章于 2026-05-28 10:08:07 发布

原创最新推荐文章于 2026-05-28 10:08:07 发布 · 1w 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

web前端

当前文章被收录于：

web前端

736 篇文章 17 人学习

订阅专栏查看详情

前端技术分享

当前文章被收录于：

前端技术分享

271 篇文章 3 人学习

web前端基础知识

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文通过两个实例展示了 CSS3 中 transform-origin 属性的作用，该属性用于定义被旋转元素的基点位置。通过设置不同的 transform-origin 值，可以改变元素旋转时围绕的中心点，从而实现更丰富的视觉效果。

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">   
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>  
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />       
<title>CSS3 transform-origin 设置旋转元素的基点位置</title>
<style type="text/css">
html {}
body {position: relative;padding: 0;margin: 0;}
.m-box-wrapper{display: inline-block;margin: 20px 0 0; width: 300px;height:300px;border:1px solid #ddd;text-align: center;}
.m-box{display: inline-block;margin: 100px 0 0; width: 200px;height: 100px;transform: rotate(45deg); background: green;}
.m-test1{transform-origin:center center;}
.m-test2{transform-origin:right center;}
</style>
</head>
<body>
<div class="m-box-wrapper">
    <div class="m-box m-test1"></div>
</div>
<div class="m-box-wrapper">
    <div class="m-box m-test2"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>
<script>
</script>
</body>
</html>