transform 和 Transition

最新推荐文章于 2024-11-13 11:35:56 发布
最新推荐文章于 2024-11-13 11:35:56 发布
阅读量591 收藏 1
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/huang100qi/article/details/39274293
本文详细介绍了CSS3 transform在Mozilla、WebKit、Opera、IE9及W3C标准下不同的书写规则，并通过实例展示了如何在元素上应用transform属性实现旋转、缩放、倾斜和平移效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

transform在不同浏览器内核下的书写规则

  //Mozilla内核浏览器：firefox3.5+
  -moz-transform: rotate | scale | skew | translate ;
 //Webkit内核浏览器：Safari and Chrome
  -webkit-transform: rotate | scale | skew | translate ;
 //Opera
  -o-transform: rotate | scale | skew | translate ;
 //IE9
  -ms-transform: rotate | scale | skew | translate ;
 //W3C标准
  transform: rotate | scale | skew | translate ;
例如：
.demo a{ width: 100px; padding: 5px; background: red; display: block; } 
.demo a:hover {
 -moz-transform: rotate(45deg) scale(0.8,1.2) skew(60deg,-30deg); 
-webkit-transform: rotate(45deg) scale(0.8,1.2) skew(60deg,-30deg); 
-o-transform: rotate(45deg) scale(0.8,1.2) skew(60deg,-30deg);
 -ms-transform: rotate(45deg) scale(0.8,1.2) skew(60deg,-30deg);
 transform: rotate(45deg) scale(0.8,1.2) skew(60deg,-30deg); 
}
 
http://www.w3cplus.com/content/css3-transform
huang100qi
关注
CSS3特效之转化（transform）和过渡（transition）
bingkingboy的博客
04-17 1万+
在对动画深入之前，我们需要先了解它的一些特性，CSS3的转化（transform）和过渡（transition）。有人可能会有疑问，CSS3动画不是只有animation一个属性吗？怎么又和转化（transform）和过渡（transition）扯上关系了，其实并非如此，转化（transform）属性让动画的变换多元化，而过渡（transition）属性是动画中的一种表现形式，也可以说成是动画一个版
CSS3--利用transform和transition属性制作扇形导航
Wendy
01-12 5254
在前面，我们已经讲解了transform这个属性以及案例，那么本文会进一步结合transform和transition两个属性，并制作一个简单的案例进行说明。 一、transition属性说明 接下来简单分析一下transition这个属性的定义以及子属性。      1）ansition-property  要运动的样式  （all || [attr] || none）      2）t
transform 和transition
weixin_40014283的博客
11-16 638
做网页时候发现自己对transform，transition，translate概念搞混，好记性不如烂笔头，写下来加深印象。transform（变形） w3c定义是：transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 有很多值： translate（x，y）定义2D转换。 rotate（angle）定义2D旋转的角度。 scale（x
CSS中的transform与transition
weixin_38606332的博客
07-11 259
transform：转换对元素进行移动、缩放、转动、拉长或拉伸。方法：translate():元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数有两个div，它们的css样式如下：12345678910111213141516.before {            width: 70px;            height: 70px;          ...
transform与transition
benben0729的专栏
02-19 694
transform倾斜 #顺时针旋转7° div.rotate_left { float:left; transform:rotate(7deg); } transition 平滑过渡 #语法 transition: property duration timing-function delay; property：属性 duration ：时间 #举例 #当鼠标放到div 宽度由200p...
transition、transform、animation三个属性的使用与区别详解
热门推荐
梁婉玲krysliang的博客
11-29 1万+
transition（过渡） transform（变换） animation（动画） 从三个属性就可以知道，tansition是一个过渡属性，就是一个属性从一个值过渡到另一个值，tansform变换，就是一个整体的位置（或整体大小）发生变换，animation动画，就是在一段时间内各种属性进行变化从而达到一个动画的效果。   一、transition（过渡） W3C中对transiti...
div css3 transform和transition属性鼠标滑过动画效果
11-05
本教程将深入探讨“div css3 transform和transition属性鼠标滑过动画效果”，这两个特性是实现动态交互效果的核心。 首先，`transform`属性允许我们对HTML元素进行二维或三维的变换，如旋转、缩放、移动和平移。它...
transform和transition模型详解
最新发布
12-30
### CSS `transform` 和 `transition` 属性详解 #### 一、CSS `transform` `transform` 属性允许对元素进行旋转、缩放、移动或倾斜。此属性适用于二维和三维空间中的变换。 - **语法** ```css transform: ...
用css的transform和transition 让icon旋转，icon会模糊
06-02
使用CSS3的transform和transition属性旋转icon时，可能会出现模糊的问题，这是因为旋转会导致图像失真，从而导致模糊的效果。有以下两种方法可以解决这个问题： 1. 使用SVG格式的icon SVG格式的图像可以无损缩放和...
CSS进阶：Transform、Transition、Animation及Vertical-align详解
10-09
本文主要介绍了CSS中的Transform属性、Transition过渡动画、关键帧Animation以及Vertical-align属性的功能特性和用法。通过对这几个重要的布局排版相关技术细节展开解析，并提供了多个使用场景的具体示例进行说明，...
C3中transform和transition的使用区别
weixin_45855154的博客
07-10 660
transform是 转换，指的是改变所在元素的外观，它有很多种手段(转换函数)来改变外观，例如 位移、缩放、旋转 等，而其中的位移的函数名就叫translate，所以说，translate是transform的一部分。 最常用的有translateX、translateY和rotate。 transition是 过渡，指的是某个CSS属性值如何平滑的进行改变，就是平常说的 动效。而transform是没有动画效果，你改变了它的值，元素的样子就唰的改变了。 作者：HoPGoldy 链接：https://ww
CSS3中的transition和transform属性
m0_37756431的博客
03-14 5299
transform：转换，改变元素的外观，有很多方式来改变元素的外观，例如位移（translate），缩放（scale），旋转（rotate），倾斜（skew）等，它没用动画效果，数值改变元素样子立刻改变。 transition：过渡，指的是css的某个属性值如何平滑的改变，就是平常所说的动效 一、transform的使用 1、位移 translate(x,y) ...
transition和transform结合实现平滑动画效果
gklcsdn的博客
11-13 1687
使用创建一个自定义的过渡速率：/* 自定义贝塞尔曲线 */ } .box:hover {/* 缩放 */ } </ style >.box/* 自定义贝塞尔曲线 */ } .box:hover {/* 缩放 */ } </ style >/* 自定义贝塞尔曲线 */ } .box:hover {/* 缩放 */ } </ style >width/* 自定义贝塞尔曲线 */ } .box:hover {/* 缩放 */ } </ style >;
transition和transform属性的区别
pingguoyuan的博客
12-28 8726
初学css，经常被transition和transfor属性搞混。 transition，过渡； transform，2D/3D转换。 transition 属性是一个简写属性，用于设置四个过渡属性： transition-propertytransition-durationtransition-timing-functiontransition-delay
CSS3 transform 和 transition 的区别
蒲公英芽的博客
03-04 6809
定义 transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 transition，就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变 CSS 的属性值。 transform transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 语法： transform:...
CSS3中transition和transform的区别
farmerXU的博客
12-08 1293
属性 含义 animation（动画） 用于设置动画属性，他是一个简写的属性，包含6个属性 transition（过渡） 用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同 transform（变形） 用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表” translate（移动） translate只是transform的一个属性值，即移动。 ...
transition和transform的相关知识
qq_44053004的博客
11-17 1290
transition 功能：实现元素不同状态之间的平滑过渡。 之前：元素->hover状态 直接切换，从开始状态到结束状态，瞬间完成，中间过程几乎无法查看。 格式： transition：过渡的属性 完成时间（s） 运动曲线 延迟时间 数值型的属性才可以设置过渡。 width,height,color,font-size transition-property 过渡属性：发生变化时，想要有过渡效果的属性。all，全属性。 transition-duration 完成时间：单位是s/ms。 transi
css3中transform和transition的用法
zyz0728的博客
10-31 2301
这周在网站前台时了解到了css3的一些属性，其中就包括了我以前没太注意的css3的一些动画动作。也就是我在这里想要讲的transform和transtion这两个属性。 我先在下面贴一点w3cschool上的关于这两个属性的一些方法 这里是（transform） （transition）也有一些属性，具体的可以在自己去百度。 下面我会写一个例子，比如这次我在做项目的
博客9-19css动画
weixin_43887459的博客
09-19 286
before和after伪元素(详解) 之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查 注意： ​ 一定要有content，否则...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值