css3
2017-08-10 11:15
281 查看
CSS3 变形
旋转 rotate() -webkit-transform: rotate(-10deg);
正值顺时针旋转 负值逆时针旋转 参考中心点旋转
-webkit-transform-origin:left bottom; 改变旋转中心点 left可换位百分比跟像素-webkit-transform-origin:30% bottom;
单位 可以使用单词 像素 百分比
平移 -webkit-transform: translate(100px,100px);
translateX( ) translateY( ) translate(X ,Y) 参考左上角 只有一个值且没标明方向 为X轴
扭曲 skew( ) 单位为角度 skewX( ) skew Y( ) skew( X,Y) 正值 X向左倒 Y向下倒
只有一个值时候作用于想X轴
缩放 scaleX( ) scaleY( ) scale( X, Y) 没有单位数值为倍数 -webkit-transform: scale(2,2); 只有一个值为X和Y
0~1是缩小 1以后是放大 一般都为正值 取值范围为0~正无穷
当变形出现两个或者两个以上,语句书写顺序会导致结果不同
三维
三维申明
-webkit-transform-style: preserve-3d; 说明为3D 布局
-webkit-perspective : 800;视距
旋转 rotate3d(x, y, z, deg) rotateX() rotateY() rotateZ( ) rotate3d(1, 0, 1, 30deg) 1 为选中 0 为不选 30deg度
平移 translate3d(x, y, z) translateX( ) translateY( ) translateZ()
缩放 scale3d(x, y, z) scaleX( ) scaleY( ) scaleZ( )
扭曲 无3D
过渡
过渡属性
需要过渡属性 过渡时间 过渡动画类型 过渡延迟时间
过渡
过渡属性
需要过渡属性 过渡时间 过渡动画类型 过渡延迟时间
![](https://img-blog.csdn.net/20170810110525844?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvenpoNzM4NTc5MTM4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
缩写: transition: all 1s linear 0.5s ; all 是所有属性 1s 为过度事件 linear 为过度方式 0.5s 为延迟时间
动画:
![](https://img-blog.csdn.net/20170810111141456?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvenpoNzM4NTc5MTM4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
看完觉得有收获,请点赞。有错得地方帮忙留言指出来,我好改正。谢谢
旋转 rotate() -webkit-transform: rotate(-10deg);
正值顺时针旋转 负值逆时针旋转 参考中心点旋转
-webkit-transform-origin:left bottom; 改变旋转中心点 left可换位百分比跟像素-webkit-transform-origin:30% bottom;
单位 可以使用单词 像素 百分比
平移 -webkit-transform: translate(100px,100px);
translateX( ) translateY( ) translate(X ,Y) 参考左上角 只有一个值且没标明方向 为X轴
扭曲 skew( ) 单位为角度 skewX( ) skew Y( ) skew( X,Y) 正值 X向左倒 Y向下倒
只有一个值时候作用于想X轴
缩放 scaleX( ) scaleY( ) scale( X, Y) 没有单位数值为倍数 -webkit-transform: scale(2,2); 只有一个值为X和Y
0~1是缩小 1以后是放大 一般都为正值 取值范围为0~正无穷
当变形出现两个或者两个以上,语句书写顺序会导致结果不同
三维
三维申明
-webkit-transform-style: preserve-3d; 说明为3D 布局
-webkit-perspective : 800;视距
旋转 rotate3d(x, y, z, deg) rotateX() rotateY() rotateZ( ) rotate3d(1, 0, 1, 30deg) 1 为选中 0 为不选 30deg度
平移 translate3d(x, y, z) translateX( ) translateY( ) translateZ()
缩放 scale3d(x, y, z) scaleX( ) scaleY( ) scaleZ( )
扭曲 无3D
过渡
过渡属性
需要过渡属性 过渡时间 过渡动画类型 过渡延迟时间
过渡
过渡属性
需要过渡属性 过渡时间 过渡动画类型 过渡延迟时间
缩写: transition: all 1s linear 0.5s ; all 是所有属性 1s 为过度事件 linear 为过度方式 0.5s 为延迟时间
动画:
看完觉得有收获,请点赞。有错得地方帮忙留言指出来,我好改正。谢谢
相关文章推荐
- FireFox浏览器和IE浏览器下CSS兼容问题
- css实现背景图拉伸
- css绘画三角形,实现一些图形
- CSS技巧:word-wrap同word-break的区别
- 精通CSS+DIV简单小结(二)
- 10030---CSS 属性选择器
- css实现红十字会图标
- css inherit和auto的区别
- CSS实现标题文字过长部分显示省略号的方法
- CSS注释语法
- CSS --- 修改默认下拉框样式
- CSS 元素垂直居中的 6种方法
- javaEE02 使用HTML的表单标签编写“注册页面”,使用DIV和CSS重写网站首页
- CSS 的 outline 属性
- 鼠标覆盖行高亮显示 奇偶行背景颜色不同 css+jquery Table
- 第8天:CSS布局入门
- CSS常主标记
- WebKit之CSS处理流程(3)
- 2017用css绘制各种形状
- CSS中的Filter样式特效(一)