利用2D旋转rotate设置旋转中心点

最新推荐文章于 2023-10-17 16:06:04 发布

别爱妹妹了

最新推荐文章于 2023-10-17 16:06:04 发布

阅读量241

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_69190401/article/details/124941347

版权

这篇博客介绍如何通过CSS的`transform-origin`属性设置2D旋转的中心点，以及结合`rotate`实现元素的翻转效果。示例中展示了三个不同颜色的方块，当鼠标悬停时，方块将围绕其左下角进行180度翻转，过渡效果平滑。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
overflow: hidden;
width: 200px;
height: 200px;
border: 5px solid rgb(1, 255, 242);
margin: 10px;
float: left;
}
div::before{
content: "哈哈哈";
display: block;
width: 100%;
height: 100%;
background-color:rgb(225, 0, 250);
transform: rotate(180deg);
transform-origin: left botto