CSS3之2D转换
转换(transform)是 CSS3 中具有颠覆性的特征之一,可以实现元素的位移(translate)、旋转(rotate)、缩放(scale)等效果。
一、2D转换之移动 translate
2D移动可以改变元素在页面中的位置,类似于定位。
语法:
transform: translate(x,y);
transform: translateX(n);
transform: translateY(n);
div {
width: 100px;
height: 100px;
background-color: pink;
/* 1. margin 外边距移动
margin-top: 100px;
margin-left: 100px; */
/* 2. 定位水平移动100px,垂直移动100px
position: relative;
top: 100px;
left: 100px;*/
/* 3. transform 的 translate 移动 */
transform: translate(100px,100px);
}
2D转换的**【特点】**:
- translate 移动不会影响到其他元素的位置(绝对定位和外边距都会影响)
-
translate 中如果填百分比单位是相对于自身元素的大小的 translate(50%,50%)
<style> /* 清楚内外边距: *{ margin: 0;padding: 0;} */ div { position: relative; width: 200px; height: 200px; background-color: pink; margin: 30px auto; } p { position: absolute; top: 50%; /* 向下移动大盒子高度的一半 */ left: 50%; /* 向右移动大盒子宽度的一半 */ width: 50px; height: 50px; background-color: skyblue; transform: translate(-50%,-50%);/* 向上和左移动小盒子高度和宽度的一半 */ } </style> <body> <div> <p></p> </div> </body>
-
translate 移动对【行内标签】没有效果
二、2D转换之旋转 rotate
2D 旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。
语法:
transform: rotate(度数);
特点:
- rotate 里面填度数,单位是 deg 如:transform: rotate(45deg);
- 参数为正时,顺时针旋转,为负时,逆时针旋转
- 默认旋转中心为元素的中心点
案例一:
2D 旋转 rotate 做三角,用旋转做下面示图:
<style>
div {
position: relative;
width: 200px;
height: 35px;
border: 1px solid red;
}
.box::after {
content: ""; /* 伪元素必须要有的属性 */
display: inline-block; /* 伪元素是行内元素,无法给大小 */
position: absolute;
top: 9px;
right: 12px;
width: 10px;
height: 10px;
border-right: 1px solid black;
border-bottom: 1px solid black;
transform: rotate(45deg);
}
</style>
2D 旋转中心点 transform-origin 可以设置
transform-origin:x y;
- 参数 x 和 y 用空格隔开
- x y 默认值是元素中心点(50% 50%)
- 还可以给 x y 设置像素值,或 方位名词(top bottom left right center)
案例二:
制作如下效果
<style>
div {
overflow: hidden;
width: 100px;
height: 100px;
border: 1px solid red;
margin: 20px auto;
}
div::before{
content: "";
display: block;
width: 100%;
height: 100%;
background-image: url(./images/qq.png);
transform-origin: 0 100%;
transform: rotate(90deg);
transition: all 1s;
}
div:hover::before{
transform: rotate(0deg);
}
</style>
三、2D转换之缩放 scale
transform 中的 scale 可以放大和缩小元素。
语法:
transform: scale(x,y);
- 其中 x,y 是数字,表示缩放宽、高的倍数,大于 1 是放大,小于 1 是缩小。
- 只有一个参数时,表示宽高同比例缩放。
- 直接修改宽高值也可以改变盒子大小,区别是:修改width、和 height 值以左上角为中心向下向右改变大小,并会影响文档流。而 scale 缩放以盒子几何中心为中心点向上下左右同时进行缩放,也可以通过 transform-origin 设置缩放中心点,同旋转用法一致。
案例:
利用缩放做如下效果
<style>
div{
overflow: hidden;
float: left;
margin: 10px;
}
div img {
transition: all 0.5s; // 添加动画
}
div img:hover {
transform: scale(1.2); // 添加缩放
}
</style>
<body>
<div><a href="#"><img src="./images/kc.png" alt=""></a></div>
<div><a href="#"><img src="./images/kc.png" alt=""></a></div>
<div><a href="#"><img src="./images/kc.png" alt=""></a></div>
</body>
案例:
制作如下效果
<style>
ul {
text-align: center;
}
li {
list-style: none;
display: inline-block;
width: 25px;
height: 25px;
border-radius: 50%;
border: 1px solid blue;
text-align: center;
line-height: 25px;
margin: 5px;
transition: all .5s;
}
li:hover {
transform: scale(1.3);
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
四、2D转换综合写法
- 同时使用多个转换,格式为:transform: translate() rotate() scale() 即可。
- 三种转换书写的顺序会影响转换效果(如果先旋转会改变坐标轴方向)
- 当有位移移动时,一定要把位移放在最前面
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
margin: 50px auto;
transition: all .5s;
}
div:hover {
transform: translate(50px,100px) rotate(180deg) scale(1.5);
}
</style>
<body>
<div></div>
</body>