CSS3 transition和transform 属性

最新推荐文章于 2023-12-07 16:20:35 发布
最新推荐文章于 2023-12-07 16:20:35 发布
阅读量885 收藏 3
点赞数
分类专栏： css3 文章标签： transition属性 transform 属性
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xa5851477/article/details/64906005
版权

CSS3 transition 属性

transition 属性是一个简写属性，用于设置四个过渡属性：

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。

eg: 实现鼠标经过div宽度在2秒的时间内变宽的动态效果
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:height 2s; /* Firefox 4 */ -webkit-transition:height 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */

}

div:hover
{
width:300px;
}
</style>
</head>
<body>

<div></div>

<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>


注：-moz-transition:height 2s; /* Firefox 4 */
-webkit-transition:height 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
分别是代表兼容 老版本火狐 浏览器
兼容 Safari Chrome 浏览器
兼容 Opera浏览器


CSS3 transform 属性

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

scaleX(x) 通过设置 X 轴的值来定义缩放转换。 测试
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。 测试
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。  
rotate(angle) 定义 2D 旋转，在参数中规定角度。 测试
rotate3d(x,y,z,angle) 定义 3D 旋转。  
rotateX(angle) 定义沿着 X 轴的 3D 旋转。 测试
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。 测试
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
eg：实现div顺时针转动9度的效果
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>

<div>Hello World</div>

</body>
</html>

注：-moz-transition:height 2s; /* Firefox 4 */
-webkit-transition:height 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
分别是代表兼容 老版本火狐 浏览器
兼容 Safari Chrome 浏览器
兼容 Opera浏览器

CSS3 transition和transform 属性的合用

eg：在一秒的时间内逆时针旋转360度

. xz{
transition: transform  1 s ;
}

. xz: hover{
transform: rotate(- 360 deg) ;
}
萧十一郎XA
关注
专栏目录
【过渡效果transition，transform属性】
renrenrenrenqq的博客
01-12 2107
transform属性，过渡transition
CSS3 transition及transform属性的应用
weixin_44208755的博客
03-08 1024
一、CSS3 过渡属性transition css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标划过、单击、获得焦点或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值 过渡属性需要触发事件，如：hover（鼠标划过事件） transition-property：检索或设置对象中的参与过渡的属性 说明：属性值可以单独设置否个属性，也可以设置多个...
一篇文章吃透 CSS3 属性： transition过渡 与 transform动画
热门推荐
weixin_52212950的博客
09-28 1万+
transition 过渡与transform动画 这两个新属性的参数确实比较复杂，它们可以做出 CSS 的一些基础动画效果，平移，旋转，倾角......等等，这些也是我早期学习 CSS 的难记易忘之处，今天给大家详细总结出来。一：transition 过渡transition 可以做出 CSS 的过渡效果，例如要过渡的属性名称，要过渡的时间，过渡的延迟等待时间，过渡的速度变化（过渡类型）
web基础学习（八） CSS3的 transition、transform
June.1
04-02 1万+
1. transform 2D、3D转换 transform 属性语法 ：transform: none|transform-functions; 详细查看 2. 过渡 过渡属性手册 timing-function 的属性使用 transition: property duration timing-function delay; property 指定CSS属性的name，transi...
transform与transition
benben0729的专栏
02-19 660
transform倾斜 #顺时针旋转7° div.rotate_left { float:left; transform:rotate(7deg); } transition 平滑过渡 #语法 transition: property duration timing-function delay; property：属性 duration ：时间 #举例 #当鼠标放到div 宽度由200p...
transition和transform
weixin_46048542的博客
08-18 434
transition-property属性指定CSS属性的nametransition效果（transition效果时将会启动指定的CSS属性的变化），默认是all，width和height也可以。 提示:一个转场效果，通常会出现在当用户将鼠标悬停在一个元素上时。 transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计），默认是0. transition-delay 属性规定过渡效果何时开始（延迟过渡），值以秒或毫秒计，默认为0 ransition-timing-func.
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
09-24
主要介绍了结合 CSS3 transition transform 实现简单的跑马灯效果的示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS3中动画属性transform、transition和animation属性的区别
09-27
在CSS3中，动画属性主要包括`transform`、`transition`和`animation`，它们各自有着独特的功能和应用场景。了解这些属性的区别对于创建动态的、交互式的网页设计至关重要。 **transform属性** `transform`属性主要...
纯css3 transition动画过渡属性制作鼠标悬停图片标题
11-24
在本文中，我们将深入探讨如何使用CSS3的`transition`属性来创建动态的鼠标悬停效果，特别是针对图片标题的应用。CSS3的`transition`属性是实现平滑过渡的关键工具，它允许元素在两种状态之间平滑地变化，而不是立即...
css--transition,transform
weixin_44892520的博客
07-30 476
transition属性写在最初的样式里，而不是放在结束的样式里，即定义动画开始之前的元素外观的样式。只需要给元素设置一次transition，浏览器就会负责以动画展示从一个样式到另一个样式。
CSS3使用transition属性实现过渡效果
11-21
属性详解 transition属性目的是让css的一些属性（如background）的以平滑过渡的效果出现。它是一个合并属性，是由以下四个属性组合而成： transition-property：设置应用过渡的CSS属性，如background。 transition-duration：设置过渡效果花费的时间。默认是 0。 transition-timing-function：设置过渡效果的时间曲线。默认是 "ease"。 transition-delay：规定过渡效果何时开始。默认是 0。 示例： button{ transition: backgr
css3实现导航动画效果transform及transition
11-05
css3实现导航动画效果transform及transition css3实现导航动画效果transform及transition
transition、transform、animation三个属性的使用与区别
weixin_41796631的博客
04-22 3037
原文章：http://www.pianshen.com/article/6672108066/ 一、transform：改变元素形状 4个属性 1. rotate：围绕中心点旋转 deg 单位 2. translate（x,y）:向 x y 轴移动位置 px 3. scale：整体缩放 倍数、scaleX scaleY 沿 轴方向缩放 4. skew(x,y) 切变、scaleX sc...
transition和transform的相关知识
qq_44053004的博客
11-17 1221
transition 功能：实现元素不同状态之间的平滑过渡。 之前：元素->hover状态 直接切换，从开始状态到结束状态，瞬间完成，中间过程几乎无法查看。 格式： transition：过渡的属性 完成时间（s） 运动曲线 延迟时间 数值型的属性才可以设置过渡。 width,height,color,font-size transition-property 过渡属性：发生变化时，想要有过渡效果的属性。all，全属性。 transition-duration 完成时间：单位是s/ms。 transi
CSS3属性：transition和transform
lyna的博客
08-31 790
一.定义 1.transition 属性是一个简写属性，用于设置四个过渡属性： transition-property--规定设置过渡效果的 CSS 属性的名称 transition-duration--规定完成过渡效果需要多少秒或毫秒 transition-timing-function--规定速度效果的速度曲线 transition-delay--定义过渡效果何时开始 另外三个属性值...
CSS3 属性： transition过渡 与 transform动画
最新发布
一步一个脚印，踏实努力，向着目标前进
12-07 2464
CSS3 提供了很多强大的功能，使开发人员可以创建更加吸引人的视觉效果，而不需要依赖于 JavaScript 或 Flash。其中，transition和transform是两个常用的属性，它们分别用于创建平滑的过渡效果和元素的变形效果。下面我们将详细介绍这两个属性的使用方法并给出代码示例。
CSS3中的transition和transform属性
Evan's Blog ٩(๑❛ᴗ❛๑)۶
04-25 8901
一、前言 开门见山的说，transition、transform和translate这三者经常有人搞混，先把这三者做一个简单解释： transform是 转换，指的是改变所在元素的外观，它有很多种手段(转换函数)来改变外观，例如 位移、缩放、旋转 等，而其中的位移的函数名就叫translate，所以说，translate是transform的一部分。 transition是 过渡，指的是某个CS...
探究CSS3中的transition和transform属性方法使用
JackieDYH的博客
06-04 3502
transition、transform和translate这三者经常有人搞混，先把这三者做一个简单解释： transform是转换，指的是改变所在元素的外观，它有很多种手段(转换函数)来改变外观，例如位移、缩放、旋转等，而其中的位移的函数名就叫translate，所以说，translate是transform的一部分。 transition是过渡，指的是某个CSS属性值如何平滑的进行改变，就是平常说的动效。而transform是没有动画效果，你改变了它的值，元素的样子就唰的改变了。 t...
transition、transform 区别和应用
qq_38110572的博客
08-30 2088
当页面中的动画是自己执行的那么我们考虑用animation，因为transition是需要借助伪类、js、@madia触发的。常见的伪类是：hover ，：focus。@media可以用于页面缩小到1000px你可以展示你需要的动画。1.动画循环，复杂的动画用animation。动画——需要先定义关键帧，再通过animation属性引用关键帧。动画：复杂动画效果，可以定义关键帧，控制每一帧的动画效果。过渡：简单动画效果，可以通过属性展示动画的速度效果。过渡：需要借助伪类、js、@media触发。
CSS3变形技巧：transform属性深度解析
在CSS3中，变形（transform）功能是一个强大的工具，它允许开发者对元素进行二维或三维空间内的各种变换操作，包括旋转、缩放、倾斜和移动。这个特性极大地提升了网页设计的灵活性和动态效果。 1. transform属性的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值