CSS3 transform对overflow absolute元素的限制实例页面
回到相关文章 »代码:
CSS代码:
.overflow { width: 191px; height: 191px; border: 2px solid #beceeb; overflow: hidden; } .overflow img { position: absolute; } .transform { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
HTML代码:
<p><strong>图片自身transform</strong></p> <div class="overflow"> <img src="mm1.jpg" class="transform" /> </div> <p><strong>overflow容器transform</strong></p> <div class="overflow transform"> <img src="mm1.jpg" /> </div> <p><strong>overflow和图片之间内嵌元素transform</strong></p> <div class="overflow"> <div class="transform"> <img src="mm1.jpg" /> </div> </div>
效果:
图片自身transform
overflow容器transform
overflow和图片之间内嵌元素transform