CSS3-2D转换
css3-2D转换
2d转换
转换(transform) 是css3中具备颠覆性的特征之一，能够实现元素的位移、缩放等效果。css
2d转换之移动 translate
2d移动时2d转换里面的一种功能，能够改变在页面中的位置，相似定位。html
- 定义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效果
css3
img:hover{ transform:translateY(-5px); }
案例 ；让盒子水平和垂直居中。
web
<!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维平面内顺时针旋转或者逆时针旋转。svg
- 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
咱们能够设置元素转换的中心点ui
- 注意后面的参数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>
案例 旋转
spa
<!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
用于控制它放大仍是缩小。3d
- 注意其中的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>
案例 图片放大code
<!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() …等。
- 其顺序会影响转换的效果 (先旋转会改变坐标轴方向)
- 当咱们同时有位移和其余属性的时候，记得要将位移放到最前。