CSS学习笔记-02. 2D转换模块-形变中心点
2024-08-30 19:34:18
简单粗暴，直接上重点： transform-origin
接下来是代码。
首先 勾勒出 3个重叠的div
接着 给3个div分别添加 transform: rotate 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: ;
padding: ;
} ul{
width: 200px;
height: 200px;
margin: 100px auto;
border: 1px solid #;
position: relative; } ul li{
list-style: none;
width: 200px;
height: 200px;
position: absolute;
left: ;
top: ;
} ul li:nth-child(){
background-color: red; } ul li:nth-child(){
background-color: green; } ul li:nth-child(){
background-color: blue; } </style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: ;
padding: ;
} ul{
width: 200px;
height: 200px;
margin: 100px auto;
border: 1px solid #;
position: relative; } ul li{
list-style: none;
width: 200px;
height: 200px;
position: absolute;
left: ;
top: ;
} ul li:nth-child(){
background-color: red;
transform: rotate(30deg);
} ul li:nth-child(){
background-color: green;
transform: rotate(50deg);
} ul li:nth-child(){
background-color: blue;
transform: rotate(70deg);
} </style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
效果如下图所示。
默认情况下，所有元素都是以自己的中心点作为参考点来进行旋转。
我们可以通过形变中心点属性来修改它的参考点。
示例：以左上角作为中心点 → transform-origin: 0px 0px;
效果：
以右上角作为中心点：
效果：
最新文章
- Excel大批量导入数据到SQLServer数据库-万条只用1秒
- JavaScript动态增删改表格数据
- [源码分享] HIVE表数据量统计&邮件
- snmptrap使用
- 阿里云服务器无法远程其他的mysql服务器
- NavigationControllerr滑动返回
- bitnami gitlab 配置域名
- 生成pdf
- 笔记：Maven 仓库及配置详解
- Netty初体验
- c#+CAD动态移动效果
- win10 出现0x80072efd错误
- python 学习 argparse
- 工具函数(获取url ， 时间格式化，随机数)
- angular2.0学习笔记6.编程风格指南
- c++如何解决大数组栈内存不够的问题
- [整理]Error: [ngRepeat:dupes]的解决方法
- Java API方式调用Kafka各种协议
- eclipse怎么自定义工具栏
- Array和String测试与java.String.split