css3中2d变形有几种？

css3中2d变形4种：1、位移translate()，将元素在水平或垂直方向上移动指定距离；2、缩放scale()，对元素进行水平或垂直方向的缩放；3、旋转rotate()，可以对元素进行旋转；4、倾斜skew()，对元素进行倾斜转换。

translateY(Y)仅垂直方向移动（Y轴移动）

.box {
  width: 499.9999px;
  height: 400px;
  background: pink;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);  /* 走的自己的一半 */
}

让定位的盒子水平居中

2、缩放 scale(x, y)

transform:rotate(45deg);

• 当元素旋转以后，坐标轴也跟着发生的转变
• 调整顺序可以解决，把旋转放到最后
• 注意单位是 deg 度数

案例旋转扑克牌

body {
  background-color: skyblue;
}
.container {
  width: 100px;
  height: 150px;
  border: 1px solid gray;
  margin: 300px auto;
  position: relative;
}
.container > img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  transform-origin: top right;
  /* 添加过渡 */
  transition: all 1s;
}
.container:hover img:nth-child(1) {
  transform: rotate(60deg);
}
.container:hover img:nth-child(2) {
  transform: rotate(120deg);
}
.container:hover img:nth-child(3) {
  transform: rotate(180deg);
}
.container:hover img:nth-child(4) {
  transform: rotate(240deg);
}
.container:hover img:nth-child(5) {
  transform: rotate(300deg);
}
.container:hover img:nth-child(6) {
  transform: rotate(360deg);
}

4、倾斜 skew(deg, deg)

p{transform-origin: left top;transform: rotate(45deg); }  
/* 改变元素原点到左上角，然后进行顺时旋转45度 */

变形-移动

定位的盒子完美居中写法

设置变形中心点

旋转的图片

更多编程相关知识，请访问：编程学习网站！！

以上就是css3中2d变形有几种？的详细内容，更多请关注 第一PHP社区 其它相关文章！