transform以及transition_tranform transion-程序员宅基地

今天主要给大家介绍transform的几个变换方式如:translate scale rotate transform-origin以及skew,下面一一向大家介绍一下

1.translate

translate:变形,位移的元素高于普通文档流元素,但没有定位元素层级高

translateX 在X轴上面位移或形变

translateY 在Y轴上面位移或形变

translate 在X轴Y轴上面位移或形变,当我们只设置一个值时只有X轴生效

2.scale

scale:缩放 缩放的元素高于普通文档流元素,但没有定位元素层级高 可以设置负数,使用场景:设置小于12像素的字体

scaleX:以中心点沿X轴上进行缩放

scaleY:以中心点沿Y轴上进行缩放

scale : 以中心点进行缩放

scale(X,Y)X:以中心点沿X轴上进行缩放 Y:以中心点沿Y轴上进行缩放

3.rotate

rotate() 以中心进行旋转,正数按顺时针,负数按逆时针

rotateX() 以X轴进行旋转

rotateY() 以Y轴进行旋转

4.transform-origin

transform-origin 代表的是围绕运动的中心点

transform-origin:0 0 第一个值X轴,第二个值为Y轴 默认值为50% 50%,当只设置一个值时,他只代表X轴,而Y轴仍默认为0。

5.skew

skew 代表着倾斜的角度

下面例子说明一下,部分代码如下:

div{width:200px;height:200px;transition:all 2s;margin:150px auto;}

.div1{background-color:#f00;}.div2{background-color:#0f0;}

.div1:hover {transform:skew(0,30deg);transform-origin: left top;}


hover前

hover后

transition的用法,它具有四个值如下所示:

transition-property: all(制定可以过度的属性 默认值是all)

transition-duration: 0s(过渡完成需要的时间,单位是秒,默认值是0s,可以设置小数)

transition-timing-function: ease(过渡的动画类型)

ease-in,先慢后快,ease-out,先快后慢,linear 匀速变换,cubic-bezier(1, 2.2, 0.44, 0.07)贝塞尔曲线可以调你喜欢的动画过渡曲线

transition-delay: 0s(延迟过度的时间,单位是秒)

今天学习到的应该就是这些,希望能够有所帮助。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_39817708/article/details/77870312

智能推荐

java使用MultipartFile上传文件_multipartfile 克隆类-程序员宅基地

文章浏览阅读943次。@PostMapping("upload")public ResponseVo upload(@RequestParam("files[]") MultipartFile[] files) { Map<String, Object> resultMap = new HashMap<>(); if (ArrayUtils.isEmpty(files)) { //resultMap.put("message", MessageUtil.getMessa._multipartfile 克隆类

【云原生 | 01】docker容器引擎_docker cpuset.cpu_exclusive-程序员宅基地

文章浏览阅读6.4w次,点赞161次,收藏305次。容器技术显然不是什么新概念,最早的容器技术可以追溯到 1979 年诞生的 chroot 技术 ,容器技术又称为容器虚拟化,这是虚拟化技术中的一种 ,目前虚拟化技术主要有硬件虚拟化、半虚拟化和操作系统虚拟化等 。本系列文章讲述的容器虚拟化属于操作系统虚拟化,其相较于其他主流虚拟化技术更为轻量。............_docker cpuset.cpu_exclusive

《剑指offer》第7题:斐波那契数列_for 1071:菲波那契数 【题目描述1071:菲波那契数 【题目描述】 菲波那契数列是指-程序员宅基地

文章浏览阅读291次。斐波那契数列1 题目描述2 分析及题解2.1 方法一:递归2.2 方法二:递归2.3 方法三:循环迭代1 题目描述  大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0,第1项是1)。n<=392 分析及题解2.1 方法一:递归之前写过一题是需要返回整个斐波那契数列的,所以此次递归借助一个初始化列表class Solution1: def __init__(self): self.fibList = [0, 1] #_for 1071:菲波那契数 【题目描述1071:菲波那契数 【题目描述】 菲波那契数列是指

Tex Live & TeXstudio安装及配置_texstudio下载-程序员宅基地

文章浏览阅读2.8w次,点赞8次,收藏42次。目录1 TeXlive下载2 TeXstudio下载3 TeXstudio配置3.1 命令设置3.2 测试生成pdf设置中文可以这样说,TeXlive是TeX的一个发行版,适用于Windows和Linux系统,给TeX的使用提供了工作环境,大概可以理解为Java的JDK?TeXstudio则优于TeXlive自带的TeXwork editor编辑器,大概可以理解为Java的各种编译器?1 TeXlive下载https://www.tug.org/texlive/也可以在镜像网站下载,更加快,挑一个_texstudio下载

前端开发:JS的解构_前端解构-程序员宅基地

文章浏览阅读2k次,点赞7次,收藏8次。在前端开发过程中,关于数据处理是一个非常重要的操作,尤其是遇到一些复杂的业务场景情况,涉及到数据的处理也是非常麻烦的事情。从后台拿到的数据源,处理成前端需要的格式或者形式,这就需要前端开发者做中转的一系列逻辑处理,甚至涉及到算法处理,所以不要单纯的觉得数据处理就是从后台拿数据然后展示渲染处理即可,其实远不止这些,尤其是在ES6之后,新增了一种从数组或者对象中获取指定元素的方式,也就是本篇博文所要介绍的内容:解构。..._前端解构

倒置函数reverse的用法_reverse ( char *s )在c语言中代表什么-程序员宅基地

文章浏览阅读3k次。倒置字符串函数reverse:用于倒置字符串s中的各个字符的位置,如原来字符串中如果初始值为123456,则通过reverse函数可将其倒置为654321,程序如下:#include#includevoid reverse(char s[]){ int c,j,i; for(i=0,j=strlen(s)-1;i

随便推点

Android findViewById与findViewWithTag()-程序员宅基地

文章浏览阅读1.1k次。2019独角兽企业重金招聘Python工程师标准>>> ..._findviewwithtag

QT关于回调函数_qt 回调函数-程序员宅基地

文章浏览阅读5.5k次。.h文件#ifndef CALLBACK_H#define CALLBACK_Htypedef void (* Callback )( void *n_obj, void *user_data );//callbackstruct Timer{ void *user_data; void *user_obj; Callback n_cb;};cla_qt 回调函数

splice和slice的差别_splice改变原数组-程序员宅基地

文章浏览阅读502次。前端js基础:splice和slice的差别_splice改变原数组

实验6:6-5_write(str(i))-程序员宅基地

文章浏览阅读71次。f=open('sy6-5.txt','w')n=0for i in range(20): for j in range(0,2): n+=1 if n%5==0: f.write(str(i)+'\n') else: f.write(str(i)+' ')f.close()_write(str(i))

安装Anaconda_anaconda安装pytorch环境 environment location: c:\users-程序员宅基地

文章浏览阅读1.2k次。遗留问题:环境目录 Anaconda安装路径默认了,装在了C盘,环境目录也默认在了C:\Users\dell\.conda\envs配置库的时候,该环境占用空间接近1G,会对后续计算有什么影响?一、Anaconda安装时出现的问题和目前解决方式Anaconda自带Python 3.7.61.1 CMD中Warning,环境未激活暂时解决:CMD中输入 conda info --envs,enter,activate base就正常了但是,不影响Jupyter和Sp..._anaconda安装pytorch环境 environment location: c:\users\dell\.conda\envs\

HTML富文本编辑器wangEditor的使用_wangeditor html本地引用-程序员宅基地

文章浏览阅读4.6k次,点赞3次,收藏10次。HTML富文本编辑器wangEditor的使用官网http://www.wangeditor.com/用法官方文档已经讲得很清楚了,我这里只贴出代码,方便以后自己粘贴复制用用到的CSSwangEditor-fullscreen-plugin.css@CHARSET "UTF-8";.w-e-toolbar { flex-wrap: wrap; -webkit-box-lin..._wangeditor html本地引用