Trasform属性学习-Css3
来源:互联网 发布:手机淘宝上买东西教程 编辑:程序博客网 时间:2024/06/14 12:46
/*transform的属性包括:rotate() / skew() / scale() / translate(,) ,分别还有x、y之分,比如:rotatex() 和 rotatey() ,以此类推。下面我们来分解各个属性的用法:transform:rotate():含义:旋转;其中“deg”是“度”的意思,如“10deg”表示“10度”下同。*/.demo_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)}transform:skew():/*含义:倾斜;*/.demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}transform:scale():/*含义:比例;“1.5”表示以1.5的比例放大,如果要放大2倍,须写成“2.0”,缩小则为负“-”。*/.demo_transform3{-webkit-transform:scale(1.5);-moz-transform:scale(1.5)}transform:translate():/*含义:变动,位移;如下表示向右位移120像素,如果向上位移,把后面的“0”改个值就行,向左向下位移则为负“-”。*/.demo_transform4{-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)}/*transform综合:transform的常用属性就是这些了,下面我们借助transition的帮忙来演示一个关于css3 transform的综合实例:*/.demo_transform5{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out}.demo_transform5:hover{-webkit-transform:rotate(360deg) skew(-20deg) scale(3.0)translate(100px,0);-moz-transform:rotate(360deg) skew(-20deg)scale(3.0)translate(100px,0)}
阅读全文
0 0
- Trasform属性学习-Css3
- 利用trasform属性和border实现对话框下三角效果
- CSS3 属性学习
- CSS3 border-radius 属性学习
- css3学习 之 css选择器(css3 属性选择器)
- html5学习-CSS3-border-image属性
- CSS3学习笔记 之 属性选择器
- CSS3学习笔记 之 图片边框属性
- CSS3学习笔记之属性选择器(上)
- CSS3学习笔记之属性选择器(下)
- CSS3动画之animation属性学习笔记
- CSS3入门学习之属性大全手册
- CSS3入门学习之属性大全手册
- CSS3入门学习之属性大全手册
- CSS3入门学习之属性大全手册
- Css3学习之filter(滤镜)属性详解
- css3属性
- CSS3属性
- JS-手机长按点击事件
- JS首字母大写-每个单词首字母大写
- JS网址编码解码
- 关于STL中string的拷贝问题
- pageX- clientX- screenX-区别
- Trasform属性学习-Css3
- 欢迎使用CSDN-markdown编辑器
- select,poll,epoll函数
- 2017 ACM-ICPC 亚洲区(乌鲁木齐赛区)网络赛C. Coconut
- [计算机组成原理]--字节进制与补码介绍
- 《第一行代码》RecyclerView学习笔记
- 基于UDP协议可靠传输协议QUIC协议和golang server代码和client代码
- Vue-js安装
- 百度地图测量两点间距离(行车距离)