CSS transform属性

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

基本测试代码:

<style>
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}
</style>

<div>Hello World</div>

上面代码的测试效果如下图:

 

transform属性的基本语法如下:
transform: none|transform-functions;

上面基本例子里面使用的transform: rotate()中的rotate(),只是transform-functions里面里面一种效果,全部效果如下图:

全部记忆下来不太容易,具体使用时打开参考使用即可,也可以记住常用的几种就行。

这里以transform属性里面的translate的值为例来分析一下:

translate 是同时设置 translateX 和 translateY, 所以里面可以填两个参数, 第一个值 X 第二个 Y
比如transform: translateX(200px);就是向右平移200px,如果transform: translateX(-200px);就是向左平移200px;
同理transform: translateY(300px);就是向上平移300px,负数向下平移。
transform: translate(200px, 300px);就是向右平移200px, 向上平移300px。

(如果嫌平移的过快,可以添加过渡效果transition。)

translate3d 是同时设置 translateX ,translateY 和 translateZ 所以里面可以填三个参数
只不过有点不同的是:
translate 如果第二个参数不填的话,默认是0;
translate3d 三个参数必须都填上,否则就没有效果。

translate3d和translate的区别就是添加了translateZ,这个平移可以理解为垂直于2D平面的方向,如果不添加旋转的话,Z 轴是朝向我们的,所以看不出效果。
比如我们添加旋转transform: rotateY(90deg) translateZ(50px);这样就可以看到效果了,如下图:

目前还有一个问题,就是鸿硕想使用transition来监听transform却未能完全实现,比如上图中假如就一种transform: rotateY(),我们可以直接使用transition: transform 2s;或者transition: all 2s;来实现,但是上图中transform中有两个值,一个是rotateY(),另一个是translateZ(),鸿硕想使用transition实现上图中的效果,也就是先使用rotateY()旋转,然后再使用translateZ()在Z轴上面平移,鸿硕理想化的做法就是想实现这样的形式,如下:

 

transition: 'tansform: rotateY()'  2s; /* 先过渡2s旋转一定的角度 */

transition: 'tansform: translateZ()'  1s ease 2s ; /* 待上面旋转的过渡2s效果结束后,再开始Z轴平移一定的距离。*/

但是这种代码鸿硕亲测不能成功!

我网上查询了一下,没有找到答案,其实我的需求和这个网友基本一致,如下图:

 

如果哪位朋友知道的话,欢迎指点交流。
也可以加群讨论: 656992002

人已赞赏
css3建站知识

CSS transition属性

2021-8-10 21:12:06

css3

CSS3 animation属性

2021-8-20 16:24:55

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索