css3学习笔记二
2016-09-01 22:21
141 查看
接着是对图形移动、旋转、倾斜、放缩的处理。
-moz-transform:translateX(x deg) translateY(x deg);/*图形会沿着XY轴移动*/
-moz-transform:rotate(x deg);/*图形绕着原点旋转当然也可以改成XY轴*/
-moz-transform:skew(x deg);/*图形倾斜*/
-moz-transform-origin:0% 0%;/*改变坐标原点在图形中的位置*/
-moz-transform:scale();/*对图形放缩大于1是放大,小于1大于0是缩小,小于0会有反转的效果然后放缩*/
然后重点来了,perspective,perspective-origin。
perspective:可以理解为镜头于界面的距离,就是你眼睛的方位,这个会影响3D图形的透视效果,perspective值大的时候图形会小,基本上是远大近小,当然如果小于图形的z轴值会相当于在立体图形内部看。perspective -origin:可以理解为镜头的距离,就是相当于一束光从不同方位照物体会有不同的影子这个影子就是我们看到的3D图形。
-moz-transform:translateX(x deg) translateY(x deg);/*图形会沿着XY轴移动*/
-moz-transform:rotate(x deg);/*图形绕着原点旋转当然也可以改成XY轴*/
-moz-transform:skew(x deg);/*图形倾斜*/
-moz-transform-origin:0% 0%;/*改变坐标原点在图形中的位置*/
-moz-transform:scale();/*对图形放缩大于1是放大,小于1大于0是缩小,小于0会有反转的效果然后放缩*/
然后重点来了,perspective,perspective-origin。
perspective:可以理解为镜头于界面的距离,就是你眼睛的方位,这个会影响3D图形的透视效果,perspective值大的时候图形会小,基本上是远大近小,当然如果小于图形的z轴值会相当于在立体图形内部看。perspective -origin:可以理解为镜头的距离,就是相当于一束光从不同方位照物体会有不同的影子这个影子就是我们看到的3D图形。
相关文章推荐
- CSS3学习笔记2-背景图片(背景大小和多背景图)
- CSS3+HTML5学习笔记四--CSS三栏布局-宽度只适应
- HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性
- CSS3学习笔记 之 动态伪类选择器
- CSS3学习笔记 之 基本选择器
- html5 +css3 第一章学习和笔记
- 黄聪:学习笔记: CSS3 鼠标悬停动画
- CSS3学习笔记--1
- CSS3学习笔记 之 UI元素状态伪类选择器
- CSS3+HTML5学习笔记四--CSS三栏布局-宽度只适应
- CSS3学习笔记1-圆角矩形
- CSS3学习笔记4-透明度
- CSS3学习笔记3-多列/多卷
- CSS3 学习笔记
- 学习笔记 css3--选择器&新增颜色模式&文本相关
- Css3学习笔记(二):在页面中插入内容
- CSS3学习笔记5-rgbal
- HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性
- CSS3学习笔记 之 语言伪类选择器
- CSS3学习笔记(二)之CSS转换