CSS transform
属性允许你旋转,缩放,倾斜或平移给定元素。
常用的transform
属性有下面几个
属性 | 说明 |
---|---|
translate(0, 0) | 位移 |
rotate(0deg) | 旋转 |
scale(1) | 缩放 |
skew(0deg) | 斜切 |
transform的说明文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform
下面分别说一下这几个方法
translate() 位移
translate
通过x、y
轴的参数来实现偏移
语法:transform: translate(10px, 10px);
,x
轴偏移10px
,y
轴偏移10px
。
也可以单独对某一个轴进行偏移设置,css
提供了x、y
轴的语法:transform: translateX(10px);
transform: translateY(10px);
translate
的参数可以使用百分比,如果参数是百分比的话,实际的偏移距离是以自身大小为参考的,例如:一个100px
的正方形,translateX(50%)
,那么实际x轴的偏移量是自身的100px * 50% = 50px
,有了这个特性之后,可以通过transform: translate(-50%, -50%);
的写法实现垂直定位居中。
.box{
width: 20px;
height: 20px;
background: #e94242;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
transform: translate
第一个参数偏移自身x
轴的50%
,第二个参数偏移自身y
轴50%
,另外left
偏移50%
,假如自身100px
,
那么:left + 自身 - x轴自身50% = 50% + 100px - 50px = 偏移量正好居中
,y轴同理。
另外,
translate
是不受文档流影响的,direction: ltr;
文档流为左,translateX
依然往右偏移。
rotate() 旋转
rotate()
用于设置元素的旋转角度,rotate(45deg)
就是顺时针旋转45°
,rotate()
的旋转受锚点的影响(transform-origin
),锚点的问题在下文。rotate()
有四个单位,分别是:deg
角度、grad
百分度、rad
弧度 、return
圈度,最常用的就是deg
角度,其它的日常项目基本用不到。
.box{
width: 20px;
height: 20px;
background: #e94242;
transform: rotate(45deg);
}
scale()缩放
scale()
有两个参数,语法:transform: scale(参数一 , 参数二)
,分别对应横向和纵向的放大和缩小,默认值为1
(不放大)。
transform: scale(2); /**等比放大2倍 */
transform: scaleX(2); /**水平放大2倍 */
transform: scaleY(2); /**垂直放大2倍 */
transform: scale(2,1); /**x轴放大2倍,y轴不变 */
transform: scale(2,0.5); /**x轴放大2倍,y轴缩小一半 */
.shiftBox{
width: 80px;
height: 80px;
transform: scale(2,0.5); /**x轴放大2倍,y轴缩小一半 */
}
skew() 斜切
斜切字面意思就是将物体倾斜的意思,语法:transform: skew(10deg, 5deg)
表示水平斜切10
度 垂直斜切5
度,它接受两个参数,第一个参数表示x
轴,第二个参数y
轴。
也可以单独对某一个轴进行斜切,css
提供了x、y
轴的语法:transform: skewX(10deg)
:水平斜切10
度transform: skewY(10deg)
:垂直斜切10
度
/* skew() 斜切 */
.shiftBox{
width: 80px;
height: 80px;
background: #80c342;
transform: skew(10deg, 5deg); /**水平斜切10度 垂直斜切5度 */
}
斜切可以应用在图形的变换,只通过调整x、y
轴的倾斜角度即可实现一些画面效果,某些场合下比裁切属性(clip-path
)方便。
例如:实现当前任务的进度展示
这种效果只需要绘制一个矩形,将x
轴倾斜45
度
再绘制一个矩形,x
轴倾斜 -45°
即可实现
transform的细节和特性
元素引用transform属性值不会影响元素的尺寸和位置
我们在日常布局的时候,使用margin
或者定位通常会影响到其他的元素
比如上面这个案例,第二个按钮设置了margin-left
,导致第三个按钮的位置也发生变化。
如果第二个按钮使用的是transform: translateX()
偏移,那么第三个按钮的位置并不会受到影响,因为transform
属性值不会影响原始位置
另外,内联元素是不受transform
所有的变换特性的影响的,必须转为行内块才可以。
span{
/* 内联元素不受transform所有的变换特性 */
display: inline-block; /* 设置行内块后,受transform影响,解决 */
transform: translateX(50px);
}
参数的顺序不同,会影响结果
transform
的参数,会按照先后顺序执行,同样的参数,位置不同则会影响执行结果。
.order{
width: 200px;
height: 200px;
border: 1px solid red;
:nth-child(1){
width: 20px;
height: 20px;
background: #4d90fe;
transform: translateX(50px) scale(2); /* 先位移再放大,顺序影响结果 */
}
:nth-child(2){
width: 20px;
height: 20px;
background: #80c342;
transform: scale(2) translateX(50px); /* 先放大再位移,顺序影响结果 */
}
}
这里b
盒子先放大后,再执行translateX
,按照放大后的比例进行的偏移,所以b
的偏移量比a
的远。
有两点需要注意:
1、transform
和clip-path
同时使用时,先裁剪再变换
2、transform
和margin
,应该优选选择transform
,性能更高,因为transform
属性值不会影响原始位置。
transform会创建新的层叠上下文
多个元素叠在一起时,通常后执行的元素会覆盖先执行的元素,类似下面的:
一层叠一层,如果想突出展示元素可以设置z-index
来改变层级,其实这里使用transform
也可以实现,transform
会创建新的层叠上下文,后执行的元素会覆盖先执行的,所以这里无需z-index
也可以实现突出展示层级效果,这里使用了transform: scale(1);
原大小保持不变,相当于没对元素做任何操作,但是层叠顺序改变了,如下:
.layer{
width: 200px;
height: 50px;
border: 1px solid red;
padding-left: 20px;
margin: 50px;
>img{
width: 50px;
margin-left: -20px;
}
>img:hover{
transform: scale(1); /*原大小*/
box-shadow: 0px 0px 5px black;
}
}
固定定位失效
固定定位fixed
:元素会被移出正常文档流,并不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport
)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。
但如果fixed
的父级设置了transform
,那么固定定位将会失效。
/* 固定定位失效 */
.positions{
width: 200px;
height: 50px;
border: 1px solid red;
margin-top: 10px;
.positionBox{
width: 50px;
height: 50px;
background: #80c342;
transform: translateX(10px);
.positionInner{
width: 20px;
height: 20px;
background: #e94242;
right: 0px;
position: fixed; /* 父级设置了transform导致fixed失效 */
}
}
}
改变overflow对元素的限制
父级元素设置overflow: hidden;
是不能对设置了绝对定位的子级元素产生影响的,子级内容超出父级范围不能被隐藏。
.overFlow{
width: 100px;
height: 100px;
background: #4d90fe;
overflow: hidden;
>img{
width: 200px;
height: 50px;
position: absolute; /* 绝对定位不受overflow:hidden影响 */
border: 1px solid red;
}
}
但如果给父级设置了transform
,则会更改overflow
的限制,绝对定位的子元素也受到到影响
.overFlow2{
width: 100px;
height: 100px;
background: #80c342;
overflow: hidden;
transform: scale(1); /* transform更改overflow的限制,绝对定位的子元素也受到到影响 */
>img{
width: 200px;
height: 50px;
position: absolute;
bottom: 0;
border: 1px solid red;
}
}
在这里还有个注意点,img
图片跑到底部了,因为父级元素设置了transform
,只要transform
属性值不为none
的元素也可以作为绝对定位元素的包含块 ,相当于开启了相对定位。
transform-origin更改元素变换的中心坐标
transform-origin CSS
属性让你更改一个元素变形的原点。其实就是元素的锚点坐标,默认锚点在元素的中心。
.innerBox2{
width: 20px;
height: 20px;
background: #e94242;
transform: rotate(20deg); /*顺时针旋转20°*/
}
锚点在中心,顺时针旋转20°
,如果更改锚点的位置为右上角,那么会出现下面的效果
.innerBox2{
width: 20px;
height: 20px;
background: #e94242;
transform: rotate(20deg);
transform-origin: right top; /**受锚点影响 */
}
锚点可以使用方向关键字,也可以使用参数。
关于锚点的介绍,请看文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin
下面通过锚点实现钟摆效果
<div class="originPointer"></div>
.originPointer{
width: 10px;
height: 100px;
margin: 50px;
&::before{
content: '';
width: 10px;
height: 10px;
position: absolute;
background: #80c342;
border-radius: 50%;
transform: translateY(-50%);
}
&::after{
content: '';
width: 10px;
height: 100px;
background: #4d90fe;
position: absolute;
clip-path: polygon(50% 0%, 50% 0%, 100% 100%, 0% 100%);
transform: rotate(0deg);
/* transform-origin: top left; */ /* 改变锚点为左上角 */
transform-origin: 0px 0px; /* 锚点左上角 x轴和y轴,默认起点在最左侧 */
animation: pointer 2s infinite linear; /* 添加linear使画面流程不卡顿 */
}
@keyframes pointer {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(20deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(-20deg);
}
100% {
transform: rotate(0deg);
}
}
}
案例源码:https://gitee.com/wang_fan_w/css-diary文章来源:https://www.toymoban.com/news/detail-404811.html
如果觉得这篇文章对你有帮助,欢迎点赞、收藏、转发哦~文章来源地址https://www.toymoban.com/news/detail-404811.html
到了这里,关于css-transform2D变换的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!