使用 CSS3 中的 Transform 定义元素的旋转/倾斜 - 文章教程

使用 CSS3 中的 Transform 定义元素的旋转/倾斜

发布于 2018-06-30 字数 2014 浏览 1619 评论 0

CSS3 相对与 CSS2 加入很多新的属性,当然兼容问题可能没法解决,不过这是一种趋势,老版本的浏览器肯定会被取代,就让我们来看看 CSS3 中 360 度旋转、旋转放大、移动等特效制作方法。 CSS2 还是没有翻转的,CSS3 里面有 rotate 属性,这个可以把元素进行任意角度旋转,灰常强大。除了这个 rotate 旋转,还有一个 scale 缩放,一般用法格式是

-moz-transform:scale(1,1);

括弧里面(1,1)前者表示 X 轴,后者表示 Y 轴,当数字大于 1 时放大,大于 0 并小于 1 时缩小,很好理解,那么负数是怎样的效果?答案是翻转。

-moz-transform:scale(-1,1); //水平翻转
-moz-transform:scale(1,-1); //垂直翻转

360°旋转

修改 rotate 旋转度数即可实现不同的效果

a{
  transition:All 0.4s ease-in-out;
  -webkit-transition:All 0.4s ease-in-out;
  -moz-transition:All 0.4s ease-in-out;
  -o-transition:All 0.4s ease-in-out;
}
a:hover {
  transform:rotate(360deg);
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
}

有没有想问 rotation=4 是什么效果? 90、180、270 度都出来了,还要 rotation=4 实现 360 干嘛,感觉这个很费呢?

不过这个是静态的,如果动态的话,这个就是必须的了。假如用 JavaScript 控制元素旋转,从 0 顺时针旋到 270 的时候,如果没有 360 的话,那么 270 会快速的逆时针回到 0,这样就 2 了,所以要给个 360 过渡,让 270 自然到 360,然后再循环,这样就流畅了。

放大

a:hover {
 transform:scale(1.2);
 -webkit-transform:scale(1.2);
 -moz-transform:scale(1.2);
 -o-transform:scale(1.2);
 -ms-transform:scale(1.2);
}

旋转放大

a:hover {
 transform:rotate(360deg) scale(1.2);
 -webkit-transform:rotate(360deg) scale(1.2);
 -moz-transform:rotate(360deg) scale(1.2);
 -o-transform:rotate(360deg) scale(1.2);
 -ms-transform:rotate(360deg) scale(1.2);
}

上下移动

a:hover {
 transform:translate(0,-10px);
 -webkit-transform:translate(0,-10px);
 -moz-transform:translate(0,-10px);
 -o-transform:translate(0,-10px);
 -ms-transform:translate(0,-10px);
}

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0