首页 > 其他分享 >CSS3的 transform属性,怎么才能让他同时执行多个不同动画(变换属性)效果

CSS3的 transform属性,怎么才能让他同时执行多个不同动画(变换属性)效果

时间:2022-11-08 09:33:34浏览次数:45  
标签:CSS3 scale 变换 skew transform 执行 属性

如果要给一个dom元素,同时设置多个不同的CSS变换(transform)属性时

在属性中间用空格隔开即可, 旋转 缩放 扭曲 等同时执行多个效果!


div{
    width: 100px; 
    height: 100px; 
    background: red; 
 
    <!--这里是设置变换过渡时间-->
    transition: all 1s; 
} 
 
 
div:hover{
 
    <!--这里就是同时设置了:旋转 缩放 扭曲 三个变换属性!-->
    transform: rotate(360deg) scale(2,2) skew(10deg,5deg);
}

注意:当给dom元素同时设置多个变换transform属性时它们的执行顺序!

顺序:是从后向前执行的!!!

例如:

transform: rotate(360deg) scale(2,2) skew(10deg,5deg);

上面变换属性中会先执行skew(10deg,5deg)  再执行 scale(2,2) 最后再执行 rotate(360deg)

所以:顺序不同变换效果也会不同!!!

标签:CSS3,scale,变换,skew,transform,执行,属性
From: https://www.cnblogs.com/Sultan-ST/p/16868598.html

相关文章

  • 第四十章 构建数据库应用程序 - 绑定到属性
    第四十章构建数据库应用程序-绑定到属性绑定到属性要将特定的HTML输入控件绑定到对象属性,请执行以下操作:使用csp:object标记定义一个引用对象实例的服务器端变量。......
  • Javascript(笔记25) - DOM基本操作 - 节点的四个属性
    Javascript(笔记25)-DOM基本操作-节点的四个属性所有的节点都有这四个属性节点的四个属性nodeName返回元素的标签名,以大写形式表示,只读;document 的nodeName 属性:以这......
  • Stream流---根据对象中的某个属性值实现去重
    User类packagecom.gao.JDK8.Stream流;importlombok.Data;importjava.util.Date;@DatapublicclassUser{privateStringname;privateStringpas......
  • [MindSpore快速入门]Tensor张量:初始化,属性,索引,转换。01
    ​​MindSpore​​​​03张量_哔哩哔哩_bilibili​​注意本文多次引用官网的教程,以及其在b站上发的视频。这并不是我的文章,只能说我把细节打印整理下来,故我会将其标注为转......
  • ndarray 的创建及属性
    1.ndarray的创建及获取属性上节课我们有提到过ndarray的创建,我只需要将列表传入到np.array()函数中。例如:importnumpyasnpmy_list=[1,2,3,4,5,6]my_arr=n......
  • nodeType 属性
    nodeType属性返回节点的类型。nodeType是只读的。比较重要的节点类型有:元素类型NodeType元素1属性2文本3注释8文档9......
  • vue-计算属性和监视属性的区别和使用方法
    转载于:https://blog.csdn.net/qq_38110274/article/details/121242203 作者:我是天之涯  一、总述computed和watch都是vue框架中的用于监听数据变化的属性。 二......
  • vue中改变数组对象属性名
    data:{年:2022,数量:'8000'},//把data下的年改为年份,数量改为数据量data:{年份:2022,数据量:'8000'},思路:1.遍历Json数组;2.将数组每一......
  • vue-监视属性
    文本转自于:https://blog.csdn.net/weixin_46376652/article/details/125689307作者:frontEndSmallWhite 一、两种监视方式1、watch属性直接监视如果刚开始确定监视对......
  • css3 新增的特性有哪些?
    css3选择器。css3边框(borders)css3背景css3渐变css3文本效果css3字体(@font-size规则)css3转化和变形1)2D转换方法2)3D转换属性css3过渡(transition属性)css3......