<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>转换</title>
<style type="text/css">
.box{
/* 盒子摆在boby的中间 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%); /* 位移 */
width: 200px;
height: 200px;
background-color: aquamarine;
/* transform: translateX(100px); translateY(100px); */
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
margin: auto;
transition: all 2s linear;
/* transform-origin:转换的中心点
方位词:水平方向(left,center,right) 垂直方向(top,center,bottom) */
transform-origin: 50% 50%;
}
.box2:hover{
/* scale():缩放 */
/* rotate 旋转 deg 度 正数顺时针 负数逆时针*/
/* skew():倾斜 */
/* transform: scale(.2); 可单独缩放X,Y其中一个 */
/* transform: rotate(-45deg); */
/* transform: skew(45deg); */
transform: scale(2,.6);
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>
</html>
前端 转换 (html)
最新推荐文章于 2024-09-02 17:34:07 发布