.st-desc{ width: 200px; height: 200px; background: #FA96B5; position: absolute; left: 50%; top: 0; margin-left: -100px; transform:translateY(-50%) rotate(45deg); -ms-transform:translateY(-50%) rotate(45deg); -o-transform:translateY(-50%) rotate(45deg); -moz-transform:translateY(-50%) rotate(45deg); -webkit-transform:translateY(-50%) rotate(45deg); } [data-icon]:after{ content: attr(data-icon); width: 200px; height: 200px; line-height: 200px; color: #FFFFFF; font-size: 90px; text-align: center; position: absolute; left: 50%; top: 50%; margin:-100px 0 0 -100px; transform:translateY(25%) rotate(-45deg); -ms-transform:translateY(25%) rotate(-45deg); -o-transform:translateY(25%) rotate(-45deg); -moz-transform:translateY(25%) rotate(-45deg); -webkit-transform:translateY(25%) rotate(-45deg); }
代码完全一样,但是文字偏左,能否把字体文件发布出来
代码不一样
你最后[data-icon]:after 的样式 transform:translateY(25%) rotate(-45deg); 是先移Y轴再旋转
原版代码是rotate(-45deg) transform:translateY(25%); 先旋转再移动Y轴
由于顺序不同,所以显示效果不一样