当对外层盒子进行旋转后,盒子里边内容跟着旋转了,但我们需要的是盒子里边的内容正常显示(不旋转),如下图:
思路:在盒子里边内容上面包裹一层span标签,对内层的span进行逆向旋转(前提是在外层对内容进行居中显示,否则旋转基点不在外层盒子中心的话,将会导致内容不居中)
部分代码参考如下:
<div class="icon-group">
<span class="icon"><span class="icon-content">item1</span></span>
<span class="icon"><span class="icon-content">item2</span></span>
<span class="icon"><span class="icon-content">item3</span></span>
</div>
.green-section .icon-group .icon{
display: inline-block;
width: 80px;
height: 80px;
line-height: 80px;
transform: rotate(45deg);
margin: 20px;
background: #0D6F7C;
}
.green-section .icon-group .icon .icon-content{
display: inline-block;
transform: rotate(-45deg);
/* transform-origin: 56px 26px; */
}
如有错误,欢迎指正,感谢!