<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width:200px;
height:200px;
background-color:rgb(57, 241, 11);
margin:0 auto;
margin-top:100px;
/*
变形是指通过css来改变元素的形状或位置
变形不会影响到页面的布局
transform用来设置元素变形的效果
-平移:
translateX() 沿着x轴方向平移
translateY() 沿着y轴方向平移
translateZ() 沿着z轴方向平移
-平移元素,百分比是相对于自身计算的
*/
transform:translateZ(100px);
}
.box2{
width:200px;
height:200px;
background-color:rgb(241, 115, 11);
margin:0 auto;
}
.box3{
background-color:rgb(238, 81, 212);
position:absolute;
left:50%;
top:50%;
transform:translateX(-50%) translateY(-50%);
/*
这种居中方式,只适用于元素的大小确定
width:100px;
height:100px;
top:0;
left:0;
margin:auto;
*/
}
.box4,.box5{
width:200px;
height:300px;
background-color:rgb(131, 226, 226);
float:left;
margin:0 10px;
/* transition:transform .3s; */
}
.box4:hover{
/* box4点击有阴影效果 */
transform:translateY(-3px);
box-shadow:0 0 10px rgba(0,0,0,.3);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3">aaaa</div>
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>
``
transform的基本使用
猜你喜欢
转载自blog.csdn.net/weixin_44158539/article/details/113315761
今日推荐
周排行