2d变换过渡效果css3样式特效代码
本帖最后由 马不停蹄 于 2023-6-26 20:03 编辑2d变换效果css样式效果代码
可以设置移动，旋转，大小语法：transform:值a)移动 语法：transform:translate(值1,值2); 取值：第一个值代表横向移动的像素，第二个值代表纵向移动的像素<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
width:200px;
height:200px;
background:#f00;
}
.box:hover{
transform:translate(50px,20px); /* 横线移动和纵向移动 */
/*transform:translateY(50px);*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>多学一招：只设置x轴或者y轴的移动可以使用translateX和translateY，里面只设置一个值即可
b)旋转 语法：transform:rotate(角度);transform-origin:横向坐标 纵向坐标; 取值： 1.角度写法：数字deg。 2.横向坐标和纵向坐标确定旋转的圆心，可以是像素，也可以是关键字(left,right,top,bottom,center)，不设置的话，旋转的圆心默认是中心点<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
width:200px;
height:200px;
background:#f00;
margin:200px;
border-left:10px solid #0f0;
border-bottom:10px solid #00f;
}
.box:hover{
transform:rotate(45deg);/* 设置旋转和角度 */
transform-origin:left top;/* 设置旋转的圆心 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>c)缩放 语法：transform:scale(值) 取值：倍数，可以是整数，也可以是小数<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
width:200px;
height:200px;
background:#f00;
}
.box:hover{
transform:scale(2);
}
</style>
</head>
<body>
<div class="box">
</div>
<p>asdf</p>
</body>多学一招：如果有两个值，第一个代表宽度比例，第二个代表高度比例5.过渡效果是一个动画的效果语法：transition:动画css属性 过渡时间秒数 速度类型 延迟的秒数 取值：第一个值，写css属性名称，就是要发生改变的css属性，第二个值是时间单位s秒，第三个值是发生改变的曲线linear匀速，ease先慢后快再慢，第四个值可以定义动画在几秒后开始<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
img{
display:block;
margin:50px auto;
border:1px solid #000;
/* 加过渡效果，必须是在元素原本的样式上面加，不在伪类上加 */
transition:transform 2s linear;
}
img:hover{
transform:scale(1.5);
}
</style>
</head>
<body>
<img src="img/meinv.jpg" />
</body>
页:
[1]