CSS3笔记——转换
来源:互联网 发布:java快速开发平台 开源 编辑:程序博客网 时间:2024/06/11 17:21
CSS3 Transform
让一个元素在坐标系统变形。包含一系列变形函数,可以移动、旋转和缩放元素。
兼容性:
IE12+、FireFox16+、Chrome36+、Safari16+、Opera23+
CSS 2D转换
旋转rotate
通过指定的角度参数,对于原元素指定一个2D旋转
语法:
transform: rotate(角度)
参数说明:
单位deg;
正数表示顺时针旋转,负数表示逆时针旋转。
移动translate
根据左(X轴)、顶部(Y轴)位置给定的参数,从当前元素位置移动。
省略第二个参数,默认为0。
语法:
transform: translateX(x) 水平方向移动transform: translateY(y) 垂直方向移动transform: translate(x,y) 水平方向和垂直方向**同时**移动
参数说明:
长度单位
缩放 scale
指定对象的2D缩放
省略第二个参数,默认相同,就变成等比例缩放了。
X轴,以垂直中间线为原点缩放。Y轴以水平中间线。
语法:
transform: scaleX(x) 水平方向缩放transform: scaleY(y) 垂直方向缩放transform: scale(x,y) 水平、垂直方向同时缩放
单位:数值 0~1。
扭曲 skew
指定对象斜切扭曲,单位:deg
忽略第二个参数,默认为0。
语法:
transform: skewX(角度deg) 水平方向扭曲变形transform: skewY(角度deg) 垂直方向扭曲变形transform: skew(x角度,y角度) 水平、垂直方向同时扭曲变形
CSS 3D转换
旋转
在对应轴上旋转
语法
transform: rotateX(角度deg) X轴 transform: rotateY(角度deg) Y轴 transform: rotateZ(角度deg) Z轴 (视觉上像时钟)transform: rotate3d(x,y,z,角度) 整合
补充说明:
x,y,z值可以是0或1,代表有无。
只要三者中有一个是1,第四个参数便可以使用0.001~1之间的数值。
3D移动
语法:
transform: translateZ(角度deg) Z轴方向移动transform: translateZ(x角度,y角度,z角度) 整合
3D缩放
语法:
transform: scaleZ(x) Z轴方向缩放transform: scale3d(x,y,y) 整合
单位:数值 0~1。
阅读全文
0 0
- CSS3笔记——转换
- CSS3——笔记
- CSS3笔记——背景
- CSS3笔记——渐变
- HTML5学习笔记—CSS3 transform转换属性(2D/3Dtransform方法)
- CSS3笔记——过渡 Transition
- CSS3笔记——动画 animation
- CSS3笔记——will-change
- CSS3转换
- CSS3学习笔记(二)之CSS转换
- HTML5+CSS3+JS学习笔记-10-CSS3之2D转换的用法
- HTML5+CSS3+JS学习笔记-11-CSS3之3D转换的用法
- 响应式网页设计——学习笔记三:CSS3
- JAVA培训学习笔记——CSS3选择器
- Java培训学习笔记——CSS3动画效果
- CSS3笔记1 — 文字阴影、边框阴影、自动换行
- CSS3笔记2— transform旋转、缩放、倾斜、移动
- CSS3 笔记3 — 弹性盒布局flex
- 数据结构--链表
- 窗口绘制的知识汇总
- librdkafak消费者 最小c语言版本
- socket通信服务端编程
- 算法学习之:动态树(link-cut-tree)及bzoj3282Tree例题详解
- CSS3笔记——转换
- redis配置后端启动——支持集群部署
- 欢迎使用CSDN-markdown编辑器
- XTU C语言程序设计实践作业2
- C#基础-056 字符串练习题
- return的用法是什么?若用在for循环中,还会执行下一次循环吗?
- JZOJ5354. 【NOIP2017提高A组模拟9.9】导弹拦截
- Spring学习之Spring 配置(四)
- C#特性(Attribute)