CSS3中的transform、translate和transition

之前一直搞不清楚哪个是哪个，哪个有什么用，因为三个都有trans前缀，可以称为“trans一族”。

1、transform

属性定义及使用说明：transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

语法：transform: none|transform-functions;

例如：

transform: translate(-30px,-50%);
transform:rotate(7deg);

2、 translate

translate是transform的一个属性，表示2D平移，正数表示向右和向下，负数表示向左和向上

例如：

transform: translate(-50%,-50%);
transform：translate(0,100%) 表示从元素的当前位置延y轴方向，向下移动整个元素高度的
transform：translate(-20px,0)表示从元素的当前位置延x轴方向，向左移动20px

3、transition

过渡动画，CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

指定要添加效果的CSS属性
指定效果的持续时间

例如：

transition: width 2s;（应用于宽度属性的过渡效果，时长为 2 秒）
transition:translate 2s;
transtion:all 2s;（所有有改变的属性）

注意： 如果未指定的期限，transition将没有任何效果，因为默认值是0。

指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时，规定当鼠标指针悬浮(:hover)于 <div>元素上时：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
div
{width:100px;height:100px;background:red;transition:width 2s;-webkit-transition:width 2s; /* Safari */
}div:hover
{width:300px;
}
</style>
</head>
<body><p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p><div></div><p>鼠标移动到 div 元素上，查看过渡效果。</p></body>
</html>

注意： 当鼠标光标移动到该元素时，它逐渐改变它原有样式

要添加多个样式的变换效果，添加的属性由逗号分隔：

例如：transition: width 2s, height 2s, transform 2s;（添加了宽度，高度和转换效果）

CSS3中的transform、translate和transition相关推荐

CSS3中的transform变形
在CSS3中,用Transform功能可以实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形,这四种变形分别使用rotate.scale.skew和translate这四种方法来实现.将这四种变形 ...
简单介绍CSS3中的transform的使用方法
一,转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移,旋转,缩放等效果.分为两种转换,分别是2D以及3D转换效果. 转换可以简单理解为的变形,其主要效果有三种: 移动:t ...
关于 css 中的转换属性,CSS3中的transform转换属性
linux(centos)下挂载ntfs文件系统在将硬盘插到Linux系统上,打开硬盘时一直提示:unknown filesystem type 'ntfs'.在尝试网上的方法也遇到了一些问题. 下 ...
css3中的变形（transform）、过渡(transtion)、动画(animation)
Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...
css中变形,css3中变形处理
transfrom功能在css3 中可以使用transfrom功能实现文字或图像的旋转,缩放,倾斜,移动等变形处理 deg是css3中使用的一种角度单位. 旋转: 使用rotate方法,在参数中加入 ...
css3有趣的transform形变
Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/cou ...
CSS3中rotate的作用
一.CSS3中的transform(旋转)允许您翻转,旋转,缩放和倾斜元素. transform(旋转)是一种让元素更改形状,大小和位置的效果. CSS3支持2D和3D转换. 例子: <html ...
关于css3中的2d样式skew倾斜详解
简介: 在css3中,transform有个属性skew,能使元素产生倾斜效果,不少小伙伴接触到时都很费解,为什么倾斜效果和自己想的不一样,当然网上也有不少死记硬背规律口诀的方法,但我个人觉得都不是很 ...
css3中的3d元素
景深 perspective(n)为 3D 转换元素定义透视视图 perspective的中文意思是:透视,视角. 没有透视定义,不成3D. 下图为透视的一张图: CSS3中3D transform的 ...

CSS3中的transform、translate和transition

1、transform

2、 translate

3、transition

CSS3中的transform、translate和transition相关推荐

最新文章

热门文章