css 变形（transform）
1.transform
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
/*
变形，通过变形可以对元素进行平移、放大、缩小旋转等操作
所有的变形效果，都不会影响页面的布局，这是元素的外观发生变化
使用transform 来设置变形的效果
*/
/*
平移
translateX 沿着x轴平移
- 正值元素向右移动，负值向左移动（元素没有发生旋转）
translateY 沿着y轴平移
- 正值元素向下移动，负值元素向上移动（元素没有发生旋转）
*/
transition: all .2s;
}
.box1:hover{
/* transform: translateY(-10px); */
/* box-shadow: rgba(0,0,0,.3) 0 10px 10px; */
/* 平移时百分比的单位是相对于自身进行计算的 */
transform: translateX(50%);
}
.box2{
width: 200px;
height: 200px;
background-color: tomato;
}
.box3{
position: absolute;
background-color: greenyellow;
left: 50%;
top:50%;
transform: translateX(-50%) translateY(-50%);
}
</style>
</head>
<body>
<!-- <div class="box1"></div> -->
<!--
<div class="box2"></div> -->
<div class="box3">我是一个box3</div>
</body>
</html> 相关推荐
sunshineboyleng 2020-07-08
impress 2020-05-11
yaodilu 2020-04-30
/*垂直居中，div上边界距离窗口上边的距离为窗口高度的50%，并针对不同浏览器进行兼容。-- 在外层添加一个div，把行内容居中，添加.row .justify-content-center -->
Phoebe的学习天地 2020-04-14
zjuwangleicn 2020-03-08
冰蝶 2020-03-01
somboy 2020-02-29
zengni 2020-02-23
wangjie 2020-02-22
tianzyc 2020-02-19
冰蝶 2020-02-16
lanzhusiyu 2020-02-03
lanzhusiyu 2020-01-12
MaureenChen 2020-01-01
jiedinghui 2019-12-27
zhanghao 2019-12-20
bertzhang 2019-12-14
impress 2019-12-13