<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>中心点转换transform-origin</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 1s;
/* 1.可以跟方位名词 */
/* transform-origin: left bottom; */
/* 默认的是50% 50% 相当于center center */
transform-origin: 50px 50px;
}
div:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!-- tips: -->
<!-- 1.注意后面的参数用空格隔开 -->
<!-- 2.xy默认转换的中心点是元素的中心点(50% 50%) -->
<!-- 3.还可以给xy设这像素或者方位名词(top bottom left right center) -->
CSS3之中心点转换transform-origin
猜你喜欢
转载自blog.csdn.net/weixin_44079801/article/details/106968154
今日推荐
周排行