当前位置:网站首页>transform-origin属性详解
transform-origin属性详解
2022-07-07 03:22:00 【鹿蹊zz】
transform-origin用于设置动画的基点(中心点) , 适用于所有块级元素及某些内联元素。
必须配合transform使用 默认情况下,元素的动作参考点为元素盒子的中心
可以设置九个位置的值:水平方向: left center right
0 50% 100%
垂直方向: top center bottom
默认值:50% 50% ,相对于center center
两种写法 ,
eg:
transform-origin: left;
transform-origin:0;
语法:
transform-origin: x-axis y-axis z-axis;
属性值详解
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
</div>
1.默认值,以自身原点旋转45deg
.outer {
width: 100px;
height: 100px;
background-color: #6a5acd8c;
margin: 200px;
position: relative;
}
/* (1)默认值旋转,红色为基点 默认值为 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.以顶部旋转180deg
.outer {
width: 100px;
height: 100px;
background-color: #6a5acd8c;
margin: 200px;
position: relative;
}
/* (2)以顶部旋转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.以右部旋转150deg
/* 以右部旋转150deg 红色为基点 */
.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.左上角旋转20deg 红色为基点
.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;
}
从以上例子中可以看出,属性值的所代表的偏移位置,了解各属性值所代表的偏移位置后可以很灵活得使元素按照某一基准点进行旋转。
边栏推荐
- Test of transform parameters of impdp
- How can gyms improve their competitiveness?
- Exception of DB2 getting table information: caused by: com ibm. db2.jcc. am. SqlException: [jcc][t4][1065][12306][4.25.13]
- How can clothing stores make profits?
- A slow SQL drags the whole system down
- 带你刷(牛客网)C语言百题(第一天)
- 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
- The startup of MySQL installed in RPM mode of Linux system failed
- 什么情况下考虑分库分表
- 组件的嵌套和拆分
猜你喜欢
Matlab tips (30) nonlinear fitting lsqcurefit
基于JS的迷宫小游戏
MOS管参数μCox得到的一种方法
Special behavior of main function in import statement
Academic report series (VI) - autonomous driving on the journey to full autonomy
从零到一,教你搭建「CLIP 以文搜图」搜索服务(二):5 分钟实现原型
2018年江苏省职业院校技能大赛高职组“信息安全管理与评估”赛项任务书第二阶段答案
Big coffee gathering | nextarch foundation cloud development meetup is coming
网络基础 —— 报头、封装和解包
毕业设计游戏商城
随机推荐
Multidisciplinary integration
Matlab tips (30) nonlinear fitting lsqcurefit
Basic introduction of JWT
化工园区危化品企业安全风险智能化管控平台建设四大目标
Several index utilization of joint index ABC
Sword finger offer high quality code
Please tell me how to monitor multiple schemas and tables by listening to PgSQL
从零到一,教你搭建「CLIP 以文搜图」搜索服务(二):5 分钟实现原型
健身房如何提高竞争力?
算法---比特位计数(Kotlin)
Jetpack compose is much more than a UI framework~
impdp的transform参数的测试
Leetcode T1165: 日志分析
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
品牌电商如何逆势增长?在这里预见未来!
toRefs API 与 toRef Api
Jesd204b clock network
Can 7-day zero foundation prove HCIA? Huawei certification system learning path sharing
Mysql---- import and export & View & Index & execution plan
场馆怎么做体育培训?