Css学习之transform与transition

前端开发中,我们常常用到CSS中的transform与transition,那他们的具体用法有哪些呢?今天就和大家分享一二。

transform:转换

对元素进行移动、缩放、转动、拉长或拉伸。

方法:translate():

元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数

有两个div,它们的css样式如下:

.before {

width: 70px;

height: 70px;

background-color: #8fbc8f;

}

.after {

width: 70px;

height: 70px;

background-color: #ffe4c4;

-webkit-transform: translate(50px, 30px);

-moz-transform: translate(50px, 30px);

-ms-transform: translate(50px, 30px);

-o-transform: translate(50px, 30px);

transform: translate(50px, 30px);

}

结果如下:

scale()

元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数

有两个div,它们的css样式如下:

.before {

width: 70px;

height: 70px;

background-color: #8fbc8f;

}

.after {

width: 70px;

height: 70px;

background-color: #ffe4c4;

-webkit-transform: scale(1.5, 0.8);/*宽度变为原来的1.5倍,高度变为原来的0.8倍*/

-moz-transform: scale(1.5, 0.8);

-ms-transform: scale(1.5, 0.8);

-o-transform: scale(1.5, 0.8);

transform: scale(1.5, 0.8);

}

结果如下:

skew()

元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数

.before {

width: 70px;

height: 70px;

background-color: #8fbc8f;

}

.after {

width: 70px;

height: 70px;

background-color: #ffe4c4;

-webkit-transform: skew(20deg, 20deg);/*围绕 X 轴把元素翻转20度,围绕 Y 轴翻转20度*/

-moz-transform: skew(20deg, 20deg);

-ms-transform: skew(20deg, 20deg);

-o-transform: skew(20deg, 20deg);

transform: skew(20deg, 20deg);

}

结果如下:

transition:过渡

元素从一种样式逐渐改变为另一种的效果

有一个div,它的css样式如下:

div {

width:100px;

height:100px;

background-color: #87cefa;

-webkit-transition: width 2s;/*时长为2s的宽度变化效果*/

-moz-transition: width 2s;

-o-transition: width 2s;

transition: width 2s;

}

div:hover{

width:300px;

}

文章来源:HTML5中国

时间: 2024-10-09 07:08:49

Css学习之transform与transition的相关文章

CSS中的transform与transition

transform:转换 对元素进行移动.缩放.转动.拉长或拉伸. 方法:translate(): 元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数 有两个div,它们的css样式如下: .before { width: 70px; height: 70px; background-color: #8fbc8f; } .after { width: 70px; height: 70px; background-color: #ffe4c4; -webkit

css中关于transform、transition、animate的区别

写动画经常会用到这几个属性,他们之间有什么区别呢? 1.transform 每每演示transform属性的,看起来好像都是带动画.这使得小部分直觉化思维的人(包括我)认为transform属性是动画属性.而恰恰相反,transform属性是静态属性.它其实只是一个静态属性,需要配合transition和animation才能展现出动画效果.你可以把它看成是跟left.top等属性一样,只是一个静态样式而已. 它可以让元素偏移.伸缩.变形.旋转等. 具体的给设计师改变元素样式用的属性则有以下五个

402 CSS菜鸟:transform and transition

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> #d{ width:200px; height:200px; background:blue; overflow:hidden; } #dd { width:100px; height:100px; background

每天CSS学习之transform

transform是CSS3的一个属性,其作用是用来进行2D或3D变换. 一.2D变换 1. translate(x-offset , y-offset) translate的作用就是用作位置的移动.x-offset是距离left的位置,y-offset是距离top的位置.该方法的位移不会脱离文档流. 如: .trans{ width:200px; height:50px; border:1px solid red; background-color:black; color:red; tran

css——动画(transform, transition, animation)

transform 静态属性,一旦写进style里面,会立即显示作用,无任何变化过程.(类似于left, right, top, bottom这类属性) 主要用来做元素的变形 改变元素样式的属性主要有以下五个 translate3d(x,y,z) 用来控制元素在页面的三轴上的位置 rotate(10deg) 是用来控制元素旋转角度(度deg) skewx,y 制作斜度,2d里面创建3d透视图的必备属性 scale3d(2, 1.5, -6) 用来放大缩小效果,属性是比值 matrix3d css

transform、transition 和 animation区别

CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使…变形:转换 .这里我们就可以理解为变形.那都能怎么变呢? none 表示不进行变换: rotate 旋转            transform:rotate(20deg) 旋转角度可以为负数.需要先有transform-origin定义旋转的基点可为left top center right

css3实践之图片轮播(Transform,Transition和Animation)

原文:css3实践之图片轮播(Transform,Transition和Animation) 楼主喜欢追求视觉上的享受,虽常以牺牲性能无法兼容为代价却也乐此不疲.本文就通过一个个的demo演示来简单了解下css3下的Transform,Transition和Animation. 本文需要实现效果:(请用chrome打开) 图片轮播 图片自动轮播 Transform 根据我的理解,transform和width.height.background一样,都是dom的属性,不同的是它是css3旗下的,

CSS3中和动画有关的属性transform、transition 和 animation

CSS3中和动画有关的属性有三个  transform. transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使…变形:转换 .这里我们就可以理解为变形.那都能怎么变呢? none 表示不进行变换: rotate 旋转            transform:rotate(20deg) 旋转角度可以为负数.需要先有transform-origin定义旋转的基点可为left top center righ

transform 和 transition

transform的属性包括:rotate() / skew() / scale() / translate() /matrix() 其中 rotate() 旋转度数,0-360 skew()  元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数 translate() 元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数 scale() 元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数 transition: trans