JavaScript-HTML-CSS Day11 Notes

1、transform: translate()这种写法，翻译起来并不好理解啊，因为实际是改变位置，但是 translate这个单词不是 翻译的意思吗？这怎么理解呢

首先实战中记住这个即可：

transform: translate(x轴移动距离, y轴移动距离) 

transform: translate() 中的 translate 确实可以让人困惑，因为它的字面意思是“翻译”或“转移”。

在 CSS 中，translate 实际上是指“移动”元素的意思。这个术语源自数学，表示将一个对象在空间中移动到新位置。

理解方式

  • 位置移动：translate(x, y) 可以被看作是将元素从当前位置移动 x 像素（水平）和 y 像素（垂直）的操作。

  • 视觉效果：使用 translate 不会改变元素在文档流中的实际位置，只是视觉上改变了它的呈现位置，这使得它非常适合创建动画和过渡效果。

例子

.box {
    transform: translate(50px, 100px);
}

在这个例子中，.box 元素会在视觉上向右移动 50 像素，向下移动 100 像素，而它在文档流中的原始位置依然保持不变。

通过这样的理解，translate 更像是“移动”的意思，而非“翻译”。

 

 

2、CSS中旋转角度的单位是deg, 这个全称是什么？

 

3、transform-origin 平面转化【改变旋转原点】的用法

 

4、缩放参数注意点

 

5、倾斜的亮光效果，参数取值：transform: skew()

 

6、渐变效果，线性渐变 参数取值：

 

 

7、渐变效果，径向渐变 参数取值：

 

 

8、z-index：这个参数是干啥的？

      .box .title {
        position: absolute;
        left: 15px;
        bottom: 20px;
        z-index: 2;
        width: 260px;
        color: #fff;
        font-size: 20px;
        font-weight: 700;
      }

z-index 是 CSS 中用来控制元素在 z 轴（即前后方向）的叠放顺序的属性。

简单来说，它决定了元素在页面上是“浮动”在其他元素的前面，还是被遮挡在后面。

  • 值越大：元素会越“靠前”，覆盖在 z-index 值较小的元素上。
  • 值越小：元素会被 z-index 值较大的元素覆盖。
  • 默认值：如果不设置 z-index，所有元素的 z-index 默认都是 0，叠放顺序将由文档流决定（即后面定义的元素会叠放在前面的元素上）。

在你提供的代码中，z-index: 2; 表示这个 .box .title 元素将会比那些 z-index 值小于 2 或没有定义 z-index 的元素更靠前显示。

 

posted @ 2024-09-29 15:42  AlphaGeek  阅读(32)  评论(0)    收藏  举报