当前位置:网站首页>Detailed explanation of transform origin attribute
Detailed explanation of transform origin attribute
2022-07-07 07:14:00 【Luqi zz】
transform-origin Base point for animating ( Center point ) , Applicable to all block level elements and some inline elements .
Must cooperate transform Use By default , The action reference point of the element is the center of the element box
You can set the value of nine positions : horizontal direction : left center right
0 50% 100%
vertical direction : top center bottom
The default value is :50% 50% , be relative to center center
Two ways of writing ,
eg:
transform-origin: left;
transform-origin:0;
grammar :
transform-origin: x-axis y-axis z-axis;
Attribute value details
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
</div>
1. The default value is , Rotate at its origin 45deg
.outer {
width: 100px;
height: 100px;
background-color: #6a5acd8c;
margin: 200px;
position: relative;
}
/* (1) Default rotation , Red is the base point The default value is transform-origin: 50% 50% 0;*/
.inner {
transform: rotate(45deg);
/* transform-origin: 50% 50% 0; */
width: 100%;
height: 100%;
background-color: #6a5acdeb;
}
.outer .inner:nth-child(2){
width: 5px;
height: 5px;
background-color: red;
transform: none;
position: absolute;
top: 50px;
left: 50px;
}
2. Rotate at the top 180deg
.outer {
width: 100px;
height: 100px;
background-color: #6a5acd8c;
margin: 200px;
position: relative;
}
/* (2) Rotate at the top 180deg */
.inner {
transform: rotate(180deg);
transform-origin: 50% 0;
width: 100%;
height: 100%;
background-color: #6a5acdeb;
}
.inner:nth-child(2) {
width: 5px;
height: 5px;
background-color: red;
transform: none;
position: absolute;
top: -2.5px;
left: 50px;
}
3. Rotate on the right 150deg
/* Rotate on the right 150deg Red is the base point */
.inner {
transform: rotate(150deg);
transform-origin: 100% 50%;
width: 100%;
height: 100%;
background-color: #6a5acdeb;
}
.inner:nth-child(2) {
width: 5px;
height: 5px;
background-color: red;
transform: none;
position: absolute;
top: 47.5px;
left: 97.5px;
}
4. Rotate in the upper left corner 20deg Red is the base point
.inner {
transform: rotate(-20deg);
transform-origin: 0 0;
width: 100%;
height: 100%;
background-color: #6a5acdeb;
}
.inner:nth-child(2) {
width: 5px;
height: 5px;
background-color: red;
transform: none;
position: absolute;
top: -2.5px;
left: -2.5px;
}
From the above example, we can see , The offset position represented by the attribute value , Knowing the offset position represented by each attribute value can flexibly make the element rotate according to a certain benchmark .
边栏推荐
- Abnova circulating tumor DNA whole blood isolation, genomic DNA extraction and analysis
- Torefs API and toref API
- How can flinksql calculate the difference between a field before and after update when docking with CDC?
- Answer to the second stage of the assignment of "information security management and evaluation" of the higher vocational group of the 2018 Jiangsu Vocational College skills competition
- Lm11 reconstruction of K-line and construction of timing trading strategy
- Composition API premise
- js小练习----分时提醒问候、表单密码显示隐藏效果、文本框焦点事件、关闭广告
- How to share the same storage among multiple kubernetes clusters
- main函数在import语句中的特殊行为
- Can 7-day zero foundation prove HCIA? Huawei certification system learning path sharing
猜你喜欢
Implementation of AVL tree
Non empty verification of collection in SQL
Composition API 前提
$parent (get parent component) and $root (get root component)
云备份项目
How to do sports training in venues?
CompletableFuture使用详解
Basic process of network transmission using tcp/ip four layer model
关于二进制无法精确表示小数
Nesting and splitting of components
随机推荐
异步组件和Suspense(真实开发中)
SolidWorks GB Library (steel profile library, including aluminum profile, aluminum tube and other structures) installation and use tutorial (generating aluminum profile as an example)
【JDBC以及内部类的讲解】
Paranoid unqualified company
[noi simulation] regional division (conclusion, structure)
多线程与高并发(9)——AQS其他同步组件(Semaphore、ReentrantReadWriteLock、Exchanger)
Libcurl returns curlcode description
Bus消息总线
云备份项目
弹性布局(一)
libcurl返回curlcode说明
Kuboard无法发送邮件和钉钉告警问题解决
Mobx knowledge point collection case (quick start)
ViewModelProvider. Of obsolete solution
Config分布式配置中心
Config distributed configuration center
How can brand e-commerce grow against the trend? See the future here!
点亮显示屏的几个重要步骤
Unity C function notes
Composition API premise