当前位置:  首页  >  前端开发  >  CSS+DIV

css3中2d变形有几种?

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

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度 */

变形-移动


	
	2D变形-移动
	
	

定位的盒子完美居中写法


	
	让定位的盒子居中对齐
	
	

设置变形中心点


	
	设置变形中心点
	
	

旋转的图片


	
	旋转的楚乔传
	
	

更多编程相关知识,请访问:编程学习网站!!

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

吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | json解析格式化 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有