css3动态变小 |css 元素内字体靠右

.box{
width: 100px;
height: 100px;
background-color: #f00;
transition: all 0.5s ease-in-out;
}
.box:hover{
transform: scale(0.5);
}

上面的代码中，给一个class为.box的元素设置了宽度和高度为100像素，背景色为红色，同时设置了过渡效果。当鼠标悬停在元素上时，使用transform属性将该元素的大小缩小了一半。

下面是各个属性的详细说明：

• transform: 用于向元素应用 2D 或 3D 转换。
• transition: 规定元素在何时以何种方式进行过渡。
• hover: 鼠标悬停时的伪类选择器。
• scale: 规定元素的大小比例。

CSS3的动态变形效果可以让网页设计更加灵动，为用户呈现更加生动有趣的视觉效果。