CSS3-2D转换
css3-2D转换
2d转换
转换(transform) 是css3中具有颠覆性的特征之一，可以实现元素的位移、缩放等效果。
- 移动：translate
- 选转: rotate
- 缩放： scale
2d转换之移动 translate
2d移动时2d转换里面的一种功能，可以改变在页面中的位置，类似定位。
- 定义2D转换中的移动，验证X和Y轴移动元素
- tanslate最大的优点: 不会影响到其他元素的位置
- tanslate中的百分比单位是对于自身元素的tanslate:(50%,50%);
- 对行内标签没有效果
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
div{
height: 200px;
width:200px;
}
/* 移动荷载的位置：定位 盒子的玩边境 2d转换移动 */
div:nth-child(1){
background-color: red;
/* x就是x轴是哪个移动位置 就是y轴上移动位置 中间用逗号隔开 */
/* transform: translate(x,y); */
/* transform: translate(100px,100px); */
/* transform: translateX(x); 只移动x轴 */
/* transform: translateY(y); 只移动y轴*/
}
div:nth-child(2){
background-color:blue;
transform: translateX(50%);
}
/* translate里面的参数是可以用 %,
用%移动的距离是盒子自身的高度和宽度来对比的
*/
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
运用
苏宁 商品页 鼠标hover效果
img:hover{
transform:translateY(-5px);
}
案例 ；让盒子水平和垂直居中。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子水平垂直居中1</title>
<style>
div{
position: relative;
width: 500px;
height:500px;
background-color: red;
}
p{
position: absolute;
top:50%;
left:50%;
width:200px;
height:200px;
background-color: blue;
/* 拉回盒子高度和宽度的一半 */
margin-left: -100px;
margin-top: -100px;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子水平垂直居中2</title>
<style>
div{
position: relative;
width: 500px;
height:500px;
background-color: red;
}
p{
position: absolute;
top:50%;
left:50%;
width:200px;
height:200px;
background-color: blue;
/*transform写法 */
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
旋转 rotate
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。
- rotate里面是度数，单位是deg 比如 rotate(45deg)
- 角度为正时，顺时针，负的，为逆时针
- 默认旋转的中心是元素的中心点。
案例 三角形
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
div{
position: relative;
width:249px;
height: 35px;
border:1px solid #000;
}
div::after{
content: "";
position: absolute;
/* background-color: red; */
top:10px;
right:10px;
height: 10px;
width: 10px;
border-right: 1px solid #000;
border-bottom:1px solid #000;
/* 谁做动画给谁加transition */
transition: all 0.3s;
/* transform: translate(-50%,50%); */
transform: rotate(45deg);
}
/* 鼠标经过div 里面的三角旋转 */
div:hover::after{
/* transition: all 0.3s; */
transform: rotate(225deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
转换中心点 transform-origin
我们可以设置元素转换的中心点
- 注意后面的参数x和y用空格隔开
- x,y默认转换的中心点事元素的中心点(50% 50%)
- 还可以给x y设置或者方位名词(top bottom left right center)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
div{
width: 200px;
height: 200px;
background-color: blue;
margin: 100px auto;
transition:all 1s;
/* 改变旋转中心点 左下角 */
transform-origin: left bottom;
}
div:hover{
transform: rotate(360deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
案例 旋转
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid pink;
margin: 100px auto;
/* 超出隐藏 */
overflow:hidden;
}
div::before{
content:"demo";
display: block;
width:100%;
height:100%;
background-color: red;
transition: all 1s;
/* 旋转180deg隐藏 */
transform-origin:left bottom;
transform: rotate(180deg);
}
/*鼠标移入复原*/
div:hover::before{
transform: rotate(0deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
缩放 scale
用于控制它放大还是缩小。
- 注意其中的x和y用逗号分隔
- transform:scale(1,1) : 宽和高都放大一倍，相对于没有放大
- transform:scale(2,2): 宽和高都放大了2倍
- transform:scale(2): 只写一个参数,第二个参数则和第一个参数一样，相当于scale(2,2)
- transform:scale(0.5,0.5) 缩小
- scale缩放的优势：可以设置转换中心点缩放，morning以中心点缩放的，而且不影响其他盒子。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
div{
width:200px;
height:200px;
background-color:pink;
transition: all 1s;
}
div:hover{
transform:scale(1,2);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
案例 图片放大
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
div{
overflow:hidden;
float:left;
margin:10px;
}
div img{
width: 300px;
height: 200px;
transition: all 2s;
}
div img:hover{
transform: scale(1.2);
}
</style>
</head>
<body>
<div><a><img src="./1.jpg"></a></div>
<div><a><img src="./1.jpg"></a></div>
<div><a><img src="./1.jpg"></a></div>
</body>
</html>
分页按钮
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
margin: 100px auto;
text-decoration: none;
/* overflow: hidden; */
}
li{
margin: 10px;
list-style: none;
float: left;
width: 30px;
height: 30px;
text-align: center;
border: 1px solid blue;
border-radius: 50%;
line-height: 30px;
transition: all 0.5s;
cursor: pointer;
}
li:hover{
transform: scale(1.2);
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
复合写法
注意
- 同时使用多个转换，其格式为transform:translate() rotate() scale() …等。
- 其顺序会影响转换的效果 (先旋转会改变坐标轴方向)
- 当我们同时有位移和其他属性的时候，记得要将位移放到最前。