CSS布局--transform应用(矩形旋转、缩放、倾斜、滚动、3D转换)代码
2015-08-16 20:25
615 查看
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> body, div { margin:0; padding:0; } div { width: 100px; height: 100px; background-color: burlywood; margin-left: 50px; border: 1px solid red; display: inline-block;/*不换行,但是可以设置width跟height*/ } /* translate(tx, ty) 该函数设置html组件横向移动tx距离,纵向移动ty距离。如果ty省略那么,默认是0。 translate(tx) -> translateX(tx) translate(ty) -> translateY(ty) */ .translate-original {} .translate-now { -webkit-transform: translate(10px, 10px); } /* rotate(angle)单位是deg 该函数设置html组件顺时针旋转angle角度 */ .rotate-now { -webkit-transform: rotate(30deg); } /* scale(sx, sy); 该函数设置设置HTML组件上横向缩放比为sx,纵向缩放比为sy,如果只写一个参数,sy省略,默认是sy==sx。 scaleX(sx) scaleY(sy) */ .scale-now { -webkit-transform: scale(1.5, 0.5); } .scale-now2 { -webkit-transform: scale(0.5, 1.5); } /* skew(sx, sy) 该函数设置html组件沿着x轴倾斜sx角度,沿着y轴倾斜sy角度,如果只写一个参数,sy默认是0。 skewX(sx) skewY(sy) */ .skew-now { -webkit-transform: skew(45deg, 0deg); } .skew-now2 { -webkit-transform: skewY(45deg); } /*复合*/ .component { -webkit-transform: skewY(45deg) scale(1.5, 0.5); } /*指定中心点*/ .center { -webkit-transform: skewY(45deg); -webkit-transform-origin: left top; } /* matrix(m11, m12, m21, m22, dx, dy); 矩阵变换函数,前四个参数将组成变形矩阵,dx和dy负责将坐标进行平移。 每个坐标点由(dx, dy)变为(x*m11 + y*m21 + dx, x*m12 + y*m22 + dy); eg -> matix(1.5, 0, 0, 1, 0, 0); (x*1.5 + y*0 + 0, x*0 + y*1 + 0); (1.5x, y) */ .matrix { -webkit-transform: matrix(1.5, 0, 0, 1, 0, 0); } /* rotateX(angle),3D转换,沿着X轴转动 rotateY(angle),3D转换,沿着Y轴转动 */ .rotateX { -webkit-transform: rotateX(70deg); } .rotateY { -webkit-transform: rotateY(70deg); } </style> </head> <body> <div>文字</div> 没有变动 <div>文字</div> <hr/> <div>文字</div> 移动10px 10px <div class="translate-now">文字</div> <hr/> <div>文字</div> 旋转30度 <div class="rotate-now">文字</div> <hr/> <div>文字</div> 缩放1.5, 0.5 <div class="scale-now">文字</div> <hr/> <div>文字</div> 缩放0.5, 1.5 <div class="scale-now2">文字</div> <hr/> <div>文字</div> x轴倾斜45度 <div class="skew-now">文字</div> <hr/> <div>文字</div> y轴倾斜45度 <div class="skew-now2">文字</div> <hr/> <div>文字</div> y轴倾斜45度 并且缩放1.5,0.5 <div class="component">文字</div> <hr style="margin-top: 50px"/> <div>文字</div> y轴倾斜45度 中心为left top <div class="center">文字</div> <hr style="margin-top: 120px"/> <div>文字</div> 矩阵的参数为1.5, 0, 0, 1, 0, 0 <div class="matrix">文字</div> <hr style="margin-top: 120px"/> <div>文字</div> 沿着x轴滚动70deg <div class="rotateX">文字</div> <hr style="margin-top: 120px"/> <div>文字</div> 沿着y轴滚动70deg <div class="rotateY">文字</div> </body> </html>
相关文章推荐
- 通用 CSS 笔记、建议与指导
- Html样式表
- CSS Line Box:溢出与折行
- css滤镜实现页面灰色黑白色效果代码
- CSS中背景图像
- CSS3 timing-function: steps()介绍
- 02---CSS整理
- CSS 3基础(二)——边框
- css table自动布局下<td>宽度计算
- Boostrap入门+样式学习--肆--
- css3,可以为一个元素添加多个动画
- 纯CSS3动画实现小黄人
- CSS布局之品字布局
- 在css样式表里面引用background-image没有出现图片原因与解决方法
- css 可继承属性
- VS2010 调试CSS路径不允许多斜杠
- css样式简介
- CSS3设置多个背景图片
- 如何在Flex 4 中使用新的CSS语法
- EditText样式: