CSS – Transfom

前言

之前写的 . 这篇作为整理.

参考:

Youtube – Learn CSS Transform In 15 Minutes

Demo Structure

<div class="frame">div>
<div class="box">Box1div>

一个作为框, 这样变化的时候可以对比.

CSS Style

.frame,
.box {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 200px;
  height: 200px;
}
.frame {
  border: 1px solid black;
}
.box {
  background-color: pink;
  display: flex;
  justify-content: center;
  align-items: center;
  color: blue;
  font-size: 2rem;
}

效果

Rotate

旋转 30°

transform: rotate(30deg);

效果

注意它的轴在中心的位置. 这个是可以改变的哦 (下面会说到)

Scale

transform: scale(0.8);

1.0 是原 size, 0.8 (< 1) 是缩小. > 1 是放大.

注意它的轴在中心的位置. 往中心点缩放 (下面会说到).

transform-origin

这个就是控制轴心的. 适用于 rotate 和 scale. translate 就没差 (效果都一样)

transform: rotate(30deg);
transform-origin: top left;

top left 表示方位 vertical horizontal (y, x). 

分别是, top left, top center, top right 的效果. 红色圈就是所谓的 origin. 可以看出来不同 origin 旋转的效果就不一样了.

scale 也是同一个逻辑

transform: scale(1.3);
transform-origin: 50px 150px;

做地图缩放通常会用到第 3 个.

Translate

transform: translate(50px, 20px);

horizontal, vertical (x, y)

它和 origin 没有什么关系, 因为不管在那个点移动都是一样的.

use percent

transform: translate(50%, 50%);

它会依据 width 和 height 计算出 percent, 效果:

居中

想实现的效果是 Hello World 在正中间.

 HTML 结构

<div class="container">
  <img src="./images/tifa2.PNG" />
  <h1>Hello Worldh1>
div>

不使用 background-image

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.container {
  width: 400px;
  height: 250px;
  position: relative;
}

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  color: white;
}

让 h1 绝对定位. top:50%, left 50% 这样就去到中间了.

但是过龙了. 通过 translate 把它桥回来.

transform: translate(-50%, -50%);

效果

(新)CSS

相关

标签