当前位置：首页 > news >正文

做英语在线翻译兼职网站互联网站

news 2025/7/19 6:37:29

做英语在线翻译兼职网站,互联网站,做网站的文案是指,旅游门户网站模板下载面试题——需求：在不知道父元素与子元素的宽高时如何让子元素在父元素内居中？ 1.定位父相子绝 2.子元素 top：50% left:50% 3.子元素 transform: translate(-50%,-50%) .parent{height: 500px;background-color: red;position: relative;}.c…

面试题——需求：在不知道父元素与子元素的宽高时
如何让子元素在父元素内居中？
1.定位父相子绝
2.子元素 top：50% left:50%
3.子元素 transform: translate(-50%,-50%)

        .parent{height: 500px;background-color: red;position: relative;}.child{width: 200px;height: 200px;background-color: yellow;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}

<div class="parent"><div class="child"></div>
</div>

在这里插入图片描述

旋转变换（需要设置旋转的角度）

旋转有3个方向
延x轴transform:rotateX(30deg) 延x轴旋转30度
延y轴transform:rotateY(30deg) 延y轴旋转30度
延z轴transform:rotateZ(30deg) 延z轴旋转30度
transform:rotate(30deg)延z轴旋转30度

修改旋转的基准点

transform-origin:
默认值：center 元素的正中心
可选值：top left (0 0) 元素左上角
top center (50% 0) 上边线中点
top right (100% 0) 右上角
bottom left (0 100%) 左下角
bottom center (0 100%) 下边线中点
bottom right (0 100%) 右下角

放大与缩小

transform:scaleX(2) 宽度乘以2
scaleY(0.6) 高度乘以0.6
scale（1.5）宽高都乘以1.5 最常见
特殊的：scaleX(-2) 先延X轴翻转，然后宽度乘以2
scaleY（-0.6）先延Y轴翻转，然后高度乘以0.6
scale（-1.5）沿X轴和Y轴都翻转，然后宽高都乘以1.5

动画

设置关键帧

        @keyframes changeBgcolor {0%{background-color: red;}100%{background-color: yellow;}}

        div{background-color: red;width: 100px;height: 100px;animation: changeBgcolor 10s;}

@keyframes 关键字
changeBgcolor 给动画关键帧取名字
关键帧内必须设置
0% 初始样式
100% 结束样式
在元素的样式中使用动画关键帧可以让这个元素从0%的样式变化到100%的样式，形成动画
此例中，div使用了动画关键帧changeBgcolor，所以div的样式会从红色背景变化到绿色背景。