SOURCE

<div class="sanjiao"></div>
<div class="sanjiao1"></div>
<div class="heart"></div>

/*
.flex-column(){
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.text-over(){
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
// 多行 可能有兼容问题
.text-over-cols(@cols: 2){
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: @cols;
  line-clamp: @cols;
	-webkit-box-orient: vertical;
}*/


/* 小三角 */

.sanjiao {
    width: 0;
    height: 0;
    overflow: hidden;
    border-width: 11px;
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent red;
}

.sanjiao1 {
    width: 0;
    height: 0;
    overflow: hidden;
    border-width: 11px;
    border-style: solid dashed dashed dashed;
    border-color: red transparent transparent transparent;
}

.safe-ipx {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}


/* 心形 */

.heart {
    width: 100px;
    height: 100px;
    transform: rotate(45deg);
    background-color: red;
    margin-top: 40px;
    margin-left: 40px;
}

.heart::before {
    position: absolute;
    content: '';
    background-color: red;
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    left: -50px;
}

.heart::after {
    position: absolute;
    content: '';
    background-color: red;
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    top: -50px;
}


/* 首先定义一个循环函数，根据 nth-child 分别设置移动距离
less
.head-picture(@n, @i:1) when (@i <= @n) {
  &:nth-child(@{i}) {
    transform: translateX(-30px * (@i - 1));
  }
  .head-picture(@n,(@i + 1));
}
然后在样式里面调用：

&__item {
　　// ...
　　.head-picture(10);
} */


/* 10、卡牌翻转 */

.wutai {
    position: relative;
    perspective: 800px;
    width: 220px;
    height: 292px;
    transform-style: preserve-3d;
}

#trans {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all 1s;
    transform-style: preserve-3d;
}

.back {
    transform: rotateY(180deg);
}

.flip {
    transform: rotateY(180deg);
}


/* // 9、CSS无限旋转 */

@keyframes rotate {
    0% {
        transform: rotate(0);
    }
    50% {
        transform: rotate(200deg);
    }
    100% {
        transform: rotate(0);
    }
}

.rotate {
    transition: 0.5s;
    transform-origin: 30px 30px;
    animation: rotate 10s linear infinite;
    /*开始动画后无限循环，用来控制rotate*/
}