css

更新于

问题汇总

多行文本省略 超出行之后 overflow:hidden 无效？

可能是父级添加了 transform 属性。使用其他方式定位父级

多行文本省略变成一行？

white-space: normal

动画

animation-fill-mode

雪碧图组成的帧动画，需要用到这个属性

animation-timing-function

steps 可以快速设置雪碧图动画位置，不需要一个个写位置

3d效果

perspective

指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。z > 0 的三维元素比正常大，而 z < 0 时则比正常小，大小程度由该属性的值决定

父元素需要添加 transform-style: preserve-3d

如果父元素拥有背景颜色。旋转的时候会很奇怪，所以，html结构再套一层，保证父元素没有背景颜色。背景图片之类的

.rotateCard{
    perspective: 1500px;
}


.card{
    width:375px;
    height: 375px;
    animation: run 1.96s 0.12s infinite;
}
@keyframes run {
    0% {
        transform: rotateY(0);
    }


    10.2% {
        transform: rotateY(720deg);
    }


    34.69% {
        transform: rotateY(710deg);
    }


    59.18% {
        transform: rotateY(725deg);
    }


    100% {
        transform: rotateY(720deg);
    }
}