css3动画 2D 3D transfrom
2019-10-05 20:06
316 查看
2D
transform
例如
transform: translate(1px,30px);
translate() 方法
translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。
rotate() 方法
rotate()方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。
scale() 方法
scale()方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数:
-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */
scale(2,3)转变宽度为原来的大小的2倍,和其原始大小3倍的高度。
skew() 方法
包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。
skewX();表示只在X轴(水平方向)倾斜。
skewY();表示只在Y轴(垂直方向)倾斜。
skew实例
div { transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ }
3D
相关文章推荐
- CSS3新标准选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面
- css3新属性:过渡transition,变换transform(2D,3D),动画animation
- HTML+CSS3 中的2D、3D和动画效果
- CSS3(背景样式,文本立体效果,2d3d转换及动画)第八天
- CSS3_02之2D、3D动画
- css3 开机/加载动画 2D/3D效果
- css3 动画之 2D旋转 3D旋转 放大
- 关于CSS3转换2D,3D过渡与动画方法
- 纯CSS3制作骰子3D旋转动画效果
- CSS3 3D动画 transform
- css3动画导航栏3D
- CSS3 3D旋转动画
- css3——3D动画、transform-style:preserve-3d、transform:perspective()、perspective-origin
- CSS3和js炫酷点击按钮3D翻转动画特效
- CSS3动画 3DBOX
- 用CSS3做3D动画的那些事
- 前端笔记知识点整合之HTML5&CSS3(下)2D/3D转换&animate动画
- 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理
- css边框、背景设置、字体效果、2D、3D变化及css动画
- Css3 3d animation Step1---介绍如何实现css动画