今天我们来介绍一下 CSS 的变形效果，以模仿心形效果为例。

.heart {
    width: 50px;
    height: 50px;
    position: relative;
    transform: rotate(45deg);
}

.heart:before,
.heart:after {
    content: "";
    position: absolute;
    width: inherit;
    height: inherit;
    background-color: red;
    border-radius: 50%;
    transform: rotate(45deg);
}

.heart:before {
    top: 0;
    left: -25px;
}

.heart:after {
    top: -25px;
    left: 0;
}

以上就是实现心形效果的 CSS 代码，其中用了 transform 属性来旋转元素，使用了伪元素（before 和 after）来实现左右两个半圆。这个效果比较简单，大家可以在实际开发中运用，让自己的页面更加生动有趣。