DIV 内层>DIV相对与外层垂直水平居中
2016-04-24 12:44
489 查看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> .one{ width: 500px;height: 500px;background-color: #29ABE2; position: relative; top: 200px;left: 200px; } .two{ width:200px ;height: 200px; background-color: darkmagenta; position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%); } </style> <body> <div class="one"> <div class="two"></div> </div> </body> </html>
transform定义和用法
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。为了更好地理解 transform 属性,
默认值: none
继承性: no
版本: CSS3
JavaScript 语法: object.style.transform=”rotate(7deg)”
语法
transform: none|transform-functions;
值 | 描述 |
---|---|
none | 定义不进行转换。 |
matrix(n,n,n,n,n,n) | 定义 2D 转换,使用六个值的矩阵。 |
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换,使用 16 个值的 4x4 矩阵。 |
translate(x,y) | 定义 2D 转换。 |
translate3d(x,y,z) | 定义 3D 转换。 |
translateX(x) | 定义转换,只是用 X 轴的值。 |
translateY(y) | 定义转换,只是用 Y 轴的值。 |
translateZ(z) | 定义 3D 转换,只是用 Z 轴的值。 |
scale(x,y) | 定义 2D 缩放转换。 |
scale3d(x,y,z) | 定义 3D 缩放转换。 |
scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 |
scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 |
scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 |
rotate(angle) | 定义 2D 旋转,在参数中规定角度。 |
rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 |
rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 |
rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 |
skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 |
skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换。 |
skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换。 |
perspective(n) | 为 3D 转换元素定义透视视图。 |
相关文章推荐
- hover加边框或边框加粗元素不抖动
- markdown语法之如何使用LaTeX语法编写数学公式
- 目标检测的图像特征提取之(一)HOG特征
- 在js中实现邮箱格式的验证
- BZOJ 1679 牛的呼声
- LeetCode——052
- 从四方面评价百度输入法
- 第9周项目3——人数不定的工资类
- lib静态库、dll动态库
- putchar
- Maven+Springmvc+mybatis+Dubbo+Zookeeper整合分布式架构
- 计算文本的实际大小
- Space Shooter之子弹和敌人碰撞检测、爆炸特效以及敌人的运动
- [react002] component基本用法
- [JZOJ4468][JSOI2016?]轻重路径
- 第9周项目2——我的数组类
- 15个最佳的用户体验和用户界面工具和资源
- gl.h文件错误(折腾了两天竟然是这个问题)
- C++实验4-乘法口诀表
- spring测试junit事务管理及spring面向接口注入和实现类单独注入(无实现接口),实现类实现接口而实现类单独注入否则会报错。