transform
来源:互联网 发布:双11淘宝能便宜多少 编辑:程序博客网 时间:2024/06/06 23:59
CSS3 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:all1sease-in-out;-moz-transition:all1sease-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)}
transform-origin 旋转元素的基点位置
transform-origin:20% 40%;
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform-origin:20% 40%; /* Opera */
- transform
- Transform
- transform
- transform
- transform
- transform
- Transform
- transform
- transform
- transform
- transform
- transform
- Transform
- transform
- transform
- transform
- Transform
- Transform
- Linux deepin系统下配置nginx+php-fpm+PHPstorm并解决403/404/502/file not found错误
- List初始化赋值问题
- 配置phpStorm实现remote host远程同步开发
- Linux流量监控工具--iftop
- 【Kafka源码】KafkaController启动过程
- transform
- 使用maven加载项目中缺少的jar包
- Python做一个接口压测
- notepad正则表达式为字符串添加引号
- 游戏美术设计教程之武器的设计思路
- ReactNativeJS: Expected a component class, got [object Object].
- CentOs7安装MySQL
- 存储过程
- java工程师技能以及大数据相关技术总结