CSS 3D 日常记录

CSS 3D 属性理解
属性: perspective 可以理解为看物体变化时的距离,距离越近感觉变化越明显
rotate3d (rotateX rotateY rotateZ) 旋转轴
transform-origin 观察位置
scale3d (scaleX scaleY scaleZ) 放大方向
效果
1 代码

#trapezoid {
    position: relative;
    left: 200px;
    width: 400px;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 48px;
    color: rgb(255, 255, 255);
}
  #trapezoid ::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgb(85, 136, 170);
        transform: perspective(200px) rotateX(30deg);
        z-index: -1;
        transform-origin: left;
    }

image.png

transform-origin: right;

image.png

transform-origin: bottom;

image.png

transform-origin: top;

image.png