java transform的作用_今天学习了transform的几种变换属性

transform变换

transform: translate(x,y);

1、2D移动是2D转换里面的一个功能，可以改变元素在页面中的位置，类似定位。

2、如果只需要移动移动X轴：transform: translateX(100px)；

3、如果只需要移动移动Y轴：transform: translateY(100px)；

重点：

1、定义2D转换，表示在x轴和y轴上的平移。

2、translate最大的优点：不会影响其他元素的位置。

3、translate中的百分比单位是相对于自身的 transform: translate(50%,50%);

应用小场景：

移动盒子的位置有三种方法：定位，盒子的外边距，2d转换移动。

这里演示2d转换移动的。

让一个盒子水平垂直居中：

.father {

/* 子绝父相 */

position: relative;

width: 1500px;

height: 1500px;

background-color: pink;

}

.father .son {

/* 子绝父相 */

position: absolute;

/* 直接写50%还需要计算减去子盒子自身长和高的一半 */

top: 50%;

left: 50%;

width: 300px;

height: 300px;

/* 通过2D转换里面的特性 括号里面写百分比是相对于自身的百分比，这样就可以避免麻烦的计算 */

transform: translate(-50%, -50%);

background-color: skyblue;

}

transform: rotate(度数);

1、transform: rotate(度数); 单位是deg，比如transform: rotate(45deg); 意思是顺时针旋转45°。

2、角度为正时是顺时针旋转，角度为负数时是逆时针旋转。

3、默认的旋转中心点是元素的中心点。

使用小案例：通过旋转一个div来实现小三角

实现思路：

1、设置一个正方形的div(长和宽一致)。

2、顺时针(45deg)或者逆时针(-45deg)旋转45°

3、顺时针旋转的话只设置右边和底部的边框，逆时针旋转设置左边和底部的边框。

div{

position: relative;

width: 249px;

height: 35px;

border: 1px solid #000;

}

/* 使用伪元素选择器在框内生成一个小三角 */

div::after{

content: '';

position: absolute;

top: 8px;

right: 15px;

height: 10px;

width: 10px;

transform: rotate(-45deg);

border-bottom: 1px solid black;

border-left: 1px solid black;

}

效果如下

transform-origin: x y;

1、2d转换中心点transform-origin: x y;

2、注意后面的参数是用空格隔开的

3、x y默认转换的中心点是元素的中心点(50%,50%)。

4、还可以给x y设置 像素 或者 方位名词(left center right top bottom)。

小例子：

img {

/* 将中心点设置到右侧的中间 */

transform-origin: right center;

/* 使用过渡效果查看 */

transition: all 5s;

/* transform-origin: 50px 50px; */

}

img:hover{

/* 将图片旋转720° */

transform: rotate(720deg);

}

使用案例：

当鼠标指到div的时候图片/文字从下面旋转上来

div {

width: 200px;

height: 200px;

border: 1px solid pink;

margin: 100px auto;

overflow: hidden;

}

div::before{

display: block;

content: '黑马';

width: 100%;

height: 100%;

background-color: hotpink;

transform: rotate(180deg);

transition: all .3s;

/* 中心点在左下角 */

transform-origin: left bottom;

}

div:hover::before{

transform: rotate(0deg);

}

本文地址：https://blog.csdn.net/laffey711009/article/details/107528838

希望与广大网友互动？？

点此进行留言吧！