[英]HTML5/CSS3 make a square div, width is 100%, need height equals width
[英]How to make same height and width div in css3?
CSS代码
div{
width:50px;
height:50px;
background:red;
border-radius:50px;
}
div:hover{
width:100px;
height:100px;
transition:0.4s;
-moz-transition:0.4s;
-ms-transition:0.4s;
-o-transition:0.4s;
-webkit-transition:0.4s;
}
html代码
<div>
我喜欢以相同的高度和宽度进行扩展,不仅要增加右侧和底部的宽度。
除了增加width
和height
您还可以使用CSS3转换scale()
div,例如
http://codepen.io/anon/pen/oXQGyO
div {
width:50px;
height:50px;
background:red;
border-radius:50px;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}
div:hover {
-webkit-transform: scale(2);
-moz-transform: scale(2);
transform: scale(2);
-webkit-transition:0.4s;
-moz-transition:0.4s;
transition:0.4s;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.