CSS3_02_过渡_动画_2D3D转换

最新推荐文章于 2023-02-07 18:19:09 发布
最新推荐文章于 2023-02-07 18:19:09 发布
阅读量552 收藏 3
点赞数 1
分类专栏： # CSS/CSS3 文章标签： CSS3 动画 过渡 3D转换 2D转换
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pre_eminent/article/details/79505587
版权




CSS3 2D 转换

CSS3 转换

CSS3转换，我们可以移动，比例化，镜像，旋转，和拉伸元素。

接下里您将会学到关于CSS3 2D转换的内容，

当您学到一个新知识的时候，最好能够自己进行操作一下，能够让您真正掌握这一知识点！


它是如何工作？

变换的效果，让某个元素改变形状，大小和位置。

您可以转换您使用2D或3D元素。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性     
transform36.0
4.0 -webkit-		10.0
9.0 -ms-		16.0
3.5 -moz-		3.2 -webkit-23.0
15.0 -webkit-
12.1
10.5 -o-
transform-origin
(two-value syntax)		36.0
4.0 -webkit-		10.0
9.0 -ms-		16.0
3.5 -moz-		3.2 -webkit-23.0
15.0 -webkit-
12.1
10.5 -o-

Internet Explorer 10, Firefox, 和 Opera支持transform 属性.

Chrome 和 Safari 要求前缀 -webkit- 版本.

注意： IE 9 要求前缀 -ms- 版本.

2D 转换

在本章您将了解2D变换方法：

  • translate()

  • rotate()

  • scale()

  • skew()

  • matrix()

在下一章中您将了解3D转换。

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>  
    <meta charset="UTF-8">  
    <meta name="author" content="beyond">  
    <meta http-equiv="refresh" content="520">  
    <meta name="description" content="免费零基础教程">  
    <meta name="viewport" content="width=device-width,   
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />  
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">  
    <title>beyondの心中の动漫神作</title>  
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">  
  
    <!--[if lt IE 9]>  
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>  
    <![endif]-->  
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;*/  
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0;  
        }
        div {
        	color: white;
        	margin: 50 auto;
        	width: 200px;
        	height: 100px;
        	background-color: Teal;
        	/*IE 9*/
        	-ms-transform:rotate(30deg);
        	/*Safari and Chrome*/
        	-webkit-transform:rotate(30deg);
        	/*标准的写最后面*/
        	transform:rotate(30deg);
        }  
          
    </style>  
</head>  
  
<body>  
 
    <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
        未闻花名
    </h1>  
 	<div>
 		transform属性演示
 	</div>
 	<br/>
	<p class="sgcontentcolor sgcenter" style="clear:left;">
		<b>注意:</b>transform属性可进行2D变换<br/>
		Safari和Chrome前面加上-webkit-<br/>
		IE9前面加上-ms-
	</p>
	<footer id="copyright" style="clear:both;">  
        <p style="font-size:14px;text-align:center;font-style:italic;">  
        Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
        </p>        
	</footer>   
</body>  
</html>

效果如下:


核心代码:

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}  


translate() 方法


translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;*/  
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0;  
        }
        div {
        	color: white;
        	width: 100px;
        	height: 75px;
        	background-color: Teal;
        }  
        /*在原始的位置上,发生偏移*/
        div#id_div_2 {
        	/*IE 9*/
        	-ms-transform:translate(50px,100px);
        	/*Safari and Chrome*/
        	-webkit-transform:translate(50px,100px);
        	/*标准的写最后面*/
        	transform:translate(50px,100px);
        }  
    </style>  
</head>  
  
<body>  
 
    <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
        未闻花名
    </h1>  
 	
 	<div>
 		div_1
 	</div>
 	<hr/>
 	<div id="id_div_2">
 		div_2
 	</div>
 	<br/>
	<p class="sgcontentcolor sgcenter" style="clear:left;">
		<b>注意:</b>transform属性可进行2D变换<br/>
		Safari和Chrome前面加上-webkit-<br/>
		IE9前面加上-ms-
	</p>
	<footer id="copyright" style="clear:both;">  
        <p style="font-size:14px;text-align:center;font-style:italic;">  
        Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
        </p>        
	</footer>   
</body>  
</html>

效果如下:


核心代码:

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}  

translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。

rotate() 方法 


rotate()方法，在一个给定度数顺时针旋转的元素。

负值是允许的，负值就是元素逆时针旋转。

代码如下:

        div {
        	color: white;
        	width: 100px;
        	height: 75px;
        	background-color: Teal;
        }  
        /*在原始的位置上,发生旋转*/
        div#id_div_2 {
        	/*IE 9*/
        	-ms-transform:rotate(45deg);
        	/*Safari and Chrome*/
        	-webkit-transform:rotate(45deg);
        	/*标准的写最后面*/
        	transform:rotate(45deg);
        }  
    </style>

效果如下:


核心代码:

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}  

rotate值（30deg）元素顺时针旋转30度。

scale() 方法 以中心点进行缩放


scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数

代码如下:

        div {
        	color: white;
        	width: 100px;
        	height: 75px;
        	background-color: Teal;
        }  
        /*在原始的位置上,发生旋转*/
        div#id_div_2 {
        	/*IE 9*/
        	-ms-transform:scale(2,2);
        	/*Safari and Chrome*/
        	-webkit-transform:scale(2,2);
        	/*标准的写最后面*/
        	transform:scale(2,2);
        }  
    </style>

效果如下:


核心代码:  以中心点缩放,宽,高

div
{
transform: scale(2,2);
-ms-transform: scale(2,2); /* IE 9 */
-webkit-transform: scale(2,2); /* Safari and Chrome */
}  

scale（2,2.0）转变宽度为原来的大小的2倍，和其原始大小2.0倍的高度。

skew() 方法


skew()方法，该元素会根据横向（X轴）和垂直（Y轴）线参数给定角度

代码如下:

        div {
        	color: white;
        	width: 100px;
        	height: 100px;
        	background-color: Teal;
        }  
        /*在原始的位置上,发生旋转
        绕中心点,沿x方向22.5deg, y方向45deg;*/
        div#id_div_2 {
        	background-color: rgba(255,181,197,0.8);
        	/*IE 9*/
        	-ms-transform:skew(22.5deg,45deg);
        	/*Safari and Chrome*/
        	-webkit-transform:skew(22.5deg,45deg);
        	/*标准的写最后面*/
        	transform:skew(22.5deg,45deg);
        }

效果如下:


绕中心点,只沿x方向 skew 45deg效果如下:


绕中心点,只沿y方向 skew 45deg效果如下:



核心代码:

div
{
transform: skew(22.5deg,45deg);
-ms-transform: skew(22.5deg,45deg); /* IE 9 */
-webkit-transform: skew(22.5deg,45deg); /* Safari and Chrome */
}  

skew(22.5deg,45deg) 元素在X轴倾斜22.5度,和Y轴上45度。

matrix() 方法

matrix()方法和2D变换方法合并成一个。

matrix 方法有六个参数(a,b,c,d,e,f)，包含旋转，缩放，移动（平移）和倾斜功能。

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;*/  
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0;  
        }
        div {
        	color: white;
        	width: 100px;
        	height: 100px;
        	background-color: Teal;
        }  
        /*在原始的位置上,旋转30度*/
        div#id_div_2 {
        	background-color: rgba(255,181,197,0.8);
        	/*IE 9*/
        	-ms-transform:matrix(0.866025,0.5,-0.5,0.866025,0,0);
        	/*Safari and Chrome*/
        	-webkit-transform:matrix(0.866025,0.5,-0.5,0.866025,0,0);
        	/*标准的写最后面*/
        	transform:matrix(0.866025,0.5,-0.5,0.866025,0,0);
        }  
    </style>  
</head>  
  
<body>  
 
    <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
        未闻花名
    </h1>  
 	
 	<div>
 		div_1
 	</div>
 	<hr/>
 	<div id="id_div_2">
 		div_2
 	</div>
 	<span>在原始的位置上,使用matrix(abcdef)绕中心点,旋转30度</span>
 	<br/>
	<p class="sgcontentcolor sgcenter" style="clear:left;">
		<b>注意:</b>transform属性可进行2D变换<br/>
		Safari和Chrome前面加上-webkit-<br/>
		IE9前面加上-ms-
	</p>
	<footer id="copyright" style="clear:both;">  
        <p style="font-size:14px;text-align:center;font-style:italic;">  
        Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
        </p>        
	</footer>   
</body>  
</html>

效果如下:


利用matrix()方法旋转div元素30°

div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}  


新转换属性

以下列出了所有的转换属性:

Property描述CSS
transform适用于2D或3D转换的元素3
transform-origin允许您更改转化元素位置3

2D 转换方法

函数描述
matrix(n,n,n,n,n,n)定义 2D 转换，使用六个值的矩阵。
translate(x,y)定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)定义 2D 转换，沿着 X 轴移动元素。
translateY(n)定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)定义 2D 缩放转换，改变元素的宽度。
scaleY(n)定义 2D 缩放转换，改变元素的高度。
rotate(angle)定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)定义 2D 倾斜转换，沿着 Y 轴。

熟练使用CSS3 2D转换方法，能够让您在设计中游刃有余




矩阵补充:

css3增加了transform功能，

用它来配合transition可以不用js就能够实现优美的动画效果，

css3提供了四种变换方法位移，缩放，旋转，斜切

matrix功能实现
其实并不难，用到的都是简单的矩阵
旋转、压缩、斜切等，本质上都是应用的matrix()方法实现的（修改matrix()方法固定几个值），

只是类似于transform:rotate这种表现形式，我们更容易理解记忆与使用。


写法是这样的
* transform: matrix(a,b,c,d,e,f);

什么意思呢?
ax+cy+e表示变换后的水平坐标，
bx+dy+f 表示变换后的垂直位置。
位移（displace） 沿x,y都平移100
* transform: matrix(1, 0, 0, 1, 100, 100); 

/* a=1, b=0, c=0, d=1, e=100, f=100 */


变换后：???Excuse Me???
x坐标 : ax+cy+e = 10+00+30 =30,
y坐标 : bx+dy+f = 00+10+30 =30.

缩放(scale) x放大3倍, y缩小0.5
* transform: matrix(3, 0, 0, 0.5, 0, 0);

其实就是这样一个公式 
*比例是 s，则有matrix(s, 0, 0, s, 0, 0);第一个s代表x轴，第二个s代表y轴。
x' = ax+cy+e = sx+0y+0 = s*x;
y' = bx+dy+f = 0x+sy+0 = s*y;


旋转(rotate) ???Excuse Me???

 // 旋转30度
* transform: matrix(0.866025,0.500000,-0.500000,0.866025,0,0);  

matrix(cosθ,sinθ,-sinθ,cosθ,0,0)
x' = xcosθ-ysinθ+0 = xcosθ-ysinθ
y' = xsinθ+ycosθ+0 = xsinθ+ycosθ

拉伸(skew) ???Excuse Me???
* transform: matrix(1,0,0.75,1,0,0);
matrix(1,tan(θy),tan(θx),1,0,0)
x' = x+ytan(θx)+0 = x+ytan(θx)
y' = xtan(θy)+y+0 = xtan(θy)+y


3D 转换

CSS3 允许您使用 3D 转换来对元素进行格式化。

点击下面的元素，您可以看到 2D 转换与 3D 转换之间的不同之处，根据自己的需求选择哪一种转换： 


浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性谷歌浏览器ie浏览器搜狐浏览器webkit浏览器

opera浏览器

transform36.0 
12.0 -webkit-		10.016.0 
10.0 -moz-		4.0 -webkit-23.0 
15.0 -webkit-
transform-origin 
(three-value syntax)		36.0 
12.0 -webkit-		10.016.0 
10.0 -moz-		4.0 -webkit-23.0 
15.0 -webkit-
transform-style36.0 
12.0 -webkit-		11.016.0 
10.0 -moz-		4.0 -webkit-23.0 
15.0 -webkit-
perspective36.0 
12.0 -webkit-		10.016.0 
10.0 -moz-		4.0 -webkit-23.0 
15.0 -webkit-
perspective-origin36.0 
12.0 -webkit-		10.016.0 
10.0 -moz-		4.0 -webkit-23.0 
15.0 -webkit-
backface-visibility36.0 
12.0 -webkit-		10.016.0 
10.0 -moz-		4.0 -webkit-23.0 
15.0 -webkit-

rotateX() 方法


rotateX()方法，围绕其在一个给定度数X轴旋转的元素。

注意: IE 9 (以及更早版本的浏览器) 和 Opera 不支持 rotateX 方法.

代码如下:

        /*在原始的位置上,3D旋转X方向45度
        IE9及更早版本 和Opera不支持rotateX属性*/
        div#id_div_2 {
        	background-color: rgba(255,181,197,0.8);
        	/*Safari and Chrome*/
        	-webkit-transform:rotateX(45deg);
        	/*标准的写最后面*/
        	transform:rotateX(45deg);
        }

效果如下:


rotateY() 方法


rotateY()方法，围绕其在一个给定度数绕Y轴旋转的元素

代码如下:

        /*在原始的位置上,3D旋转Y方向45度
        IE9及更早版本 和Opera不支持rotateY属性*/
        div#id_div_2 {
        	background-color: rgba(255,181,197,0.8);
        	/*Safari and Chrome*/
        	-webkit-transform:rotateY(45deg);
        	/*标准的写最后面*/
        	transform:rotateY(45deg);
        }

效果如下:



转换属性

下表列出了CSS3所有的转换属性：

属性描述CSS
transform向元素应用 2D 或 3D 转换。3
transform-origin允许你改变被转换元素的位置。3
transform-style规定被嵌套元素如何在 3D 空间中显示。3
perspective规定 3D 元素的透视效果。3
perspective-origin规定 3D 元素的底部位置。3
backface-visibility定义元素在不面对屏幕时是否可见。3

3D 转换方法

函数描述
matrix3d( n , n ,  n , n , n , n  ,
n , n , n  , n , n , n ,  n , n , n , n  )
定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)定义 3D 转化。
translateX(x)定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)定义 3D 缩放转换。
scaleX(x)定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)定义 3D 旋转。
rotateX(angle)定义沿 X 轴的 3D 旋转。
rotateY(angle)定义沿 Y 轴的 3D 旋转。
rotateZ(angle)定义沿 Z 轴的 3D 旋转。
perspective(n)定义 3D 转换元素的透视视图。

通过学习3D转化，可以让您的样式更加立体化，W3Cschool建议您最好能够收藏本篇文章，或者保存到本地，方便以后查找！


CSS3 过渡

CSS3 过渡

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。


浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性ChromeIEFirefoxSafariOpera
transition26.0 
4.0 -webkit-		10.016.0 
4.0 -moz-		6.1 
3.1 -webkit-		12.1 
10.5 -o-
transition-delay26.0 
4.0 -webkit-		10.016.0 
4.0 -moz-		6.1 
3.1 -webkit-		12.1 
10.5 -o-
transition-duration26.0 
4.0 -webkit-		10.016.0 
4.0 -moz-		6.1 
3.1 -webkit-		12.1 
10.5 -o-
transition-property26.0 
4.0 -webkit-		10.016.0 
4.0 -moz-		6.1 
3.1 -webkit-		12.1 
10.5 -o-
transition-timing-function26.0 
4.0 -webkit-		10.016.0 
4.0 -moz-		6.1 
3.1 -webkit-		12.1 
10.5 -o-

它是如何工作？

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

要实现这一点，必须给transition属性赋值2项内容：

  • 指定要添加效果的CSS的属性名称(如width)

  • 指定效果的持续时间(如2秒)。

核心代码:

应用于宽度属性的过渡效果，时长为 2 秒：

div 
{ 
transition: width 2s; 
-webkit-transition: width 2s; /* Safari */ 
}  

注意： 如果未指定的变化的时间长度，transition属性将没有任何效果，因为默认值是0。

当指定的CSS属性的值 更改时,动画效果就会发生。

一个典型CSS属性的变化时机是:当用户鼠标放在(hover)一个元素上时

注意：该实例无法在 IE 9 及更早 IE 版本上工作。

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;*/  
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0;  
        }
        div {
        	margin: auto;
        	width: 100px;
        	height: 100px;
        	background-color: Teal;
        	/*属性动画*/
        	transition:width 1s;
        	/*Safari*/
        	-webkit-transition:width 1s;
        }  
        /*当属性值大小变化时,会触发动画*/
        div:hover {
        	width: 300px;
        }
        
    </style>  
</head>  
  
<body>  
 
    <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
        未闻花名
    </h1>  
 	
 	<div></div>
 	
 	<br/>
	<p class="sgcontentcolor sgcenter" style="clear:left;">
		<b>注意:</b>transition属性可进行属性动画<br/>
		IE9及更早版本 不支持transition属性
	</p>
	<footer id="copyright" style="clear:both;">  
        <p style="font-size:14px;text-align:center;font-style:italic;">  
        Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
        </p>        
	</footer>   
</body>  
</html>

效果如下:


核心代码:

规定当鼠标指针悬浮(:hover)于 <div>元素上时：

div:hover 
{ 
width:300px; 
}  

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

多项改变

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

注意：该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。

代码如下:

        div {
        	margin: auto;
        	width: 100px;
        	height: 100px;
        	color: #333;
        	font-weight: bold;
        	background-color: pink;
        	/*属性动画*/
        	transition:width 1s,height 1s,transform 1s,color 1s,background-color 1s;
        	/*Safari*/
        	-webkit-transition:width 1s,height 1s,-webkit-transform 1s,color 1s,background-color 1s;
        }  
        /*当属性值大小变化时,会触发动画*/
        div:hover {
        	width: 200px;
        	height: 200px;
        	transform:rotate(180deg);
        	/*兼容Chrome,Safari,Opear*/
        	-webkit-transform:rotate(180deg);
        	color:white;
        	background-color: Teal;
        }

效果如下:


核心代码:

添加了宽度，高度和转换效果：

div 
{ 
transition: width 2s, height 2s, transform 2s; 
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; 
}  


过渡属性

下表列出了所有的过渡属性:

属性描述CSS
transition简写属性，用于在一个属性中设置四个过渡属性。3
transition-property规定应用过渡的 CSS 属性的名称。3
transition-duration定义过渡效果花费的时间。默认是 0,即没有动画效果3
transition-timing-function规定过渡效果的时间曲线。默认是 "ease"。3
transition-delay规定过渡效果何时开始。默认是 0,即立即开始,不延迟3

下面的两个例子设置所有过渡属性:

注意：该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。

分开单独设置transition属性的代码如下:

        div {
        	margin: auto;
        	width: 100px;
        	height: 100px;
        	background-color: pink;
        	/*属性动画一个一个分开写*/
        	transition-property:width;
        	transition-duration:1s;
        	transition-timing-function:linear;
        	transition-delay:2s;
        	
        	/*Safari*/
        	-webkit-transition-property:width;
        	-webkit-transition-duration:1s;
        	-webkit-transition-timing-function:linear;
        	-webkit-transition-delay:2s;
        }  
        /*当属性值大小变化时,会触发动画*/
        div:hover {
        	width: 300px;
        }

效果如下:


核心代码:

在一个例子中使用所有过渡属性：

div 
{ 
transition-property: width; 
transition-duration: 1s; 
transition-timing-function: linear; 
transition-delay: 2s; 
/* Safari */ 
-webkit-transition-property:width; 
-webkit-transition-duration:1s; 
-webkit-transition-timing-function:linear; 
-webkit-transition-delay:2s; 
}

实例

与上面的例子相同的过渡效果，但是使用了简写的 transition 属性：

div 
{ 
transition: width 1s linear 2s; 
/* Safari */ 
-webkit-transition:width 1s linear 2s; 
}  


CSS3 动画中最重要的概念 @keyframes 规则

表格中的数字表示支持该属性的第一个浏览器版本号。

@keyframes规则是创建动画。也就是指定动画的运动方式

 @keyframes规则内指定一个CSS样式和动画  将逐步从    目前的样式   更改为   新的样式。

浏览器支持

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性ChromeIEFirefoxSafariOpera
@keyframes43.0
4.0 -webkit-		10.016.0
5.0 -moz-		9.0
4.0 -webkit-		30.0
15.0 -webkit-
12.0 -o-
animation43.0
4.0 -webkit-		10.016.0
5.0 -moz-		9.0
4.0 -webkit-		30.0
15.0 -webkit-
12.0 -o-

核心代码 @keyframes 定义一个动画

@keyframes beyondAnimation
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes beyondAnimation /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}


CSS3 动画

当在@keyframe创建了一个动画之后，

还需要把它绑定到一个选择器上(意思就是指定哪一个div元素花多长时间,去执行那个动画)，

否则动画不会有任何效果。


指定至少这两个CSS3的动画属性绑定向一个选择器：

  • 定义好的那个动画的名称

  • 规定需要多长时间执行完动画

核心代码: animation属性

把 "beyondAnimation" 动画捆绑到 div 元素，时长：5 秒：

div
{
animation: beyondAnimation 5s;
-webkit-animation: beyondAnimation 5s; /* Safari and Chrome */
}  

注意: 您必须定义动画的名称和动画的持续时间。

如果省略的持续时间，动画将无法运行，因为默认值是0。

注意: 该实例在 IE 9 及更早 IE 版本是无效的。

完整代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;*/  
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0;  
        }
        div {
        	margin: auto;
        	width: 100px;
        	height: 100px;
        	background-color: pink;
        	/*animation属性绑定动画名称及运动时长*/
        	animation:beyondAnimation 2s;
        	/*兼容Safari and Chrome*/
        	-webkit-animation:beyondAnimation 2s;
        }  
        /*@keyframes可自定义属性动画
		animation属性绑定自定义的动画名称及运动时长
		IE9及更早版本 不支持animation属性*/
		@keyframes beyondAnimation {
			/*0%时的状态*/
			from {background-color: pink;}
			/*100%时的状态*/
			to {background-color: Teal;}
		}
		/*兼容 Safari and Chrome*/
		@-webkit-keyframes beyondAnimation {
			from {background-color: pink;}
			to {background-color: Teal;}
		}

        
    </style>  
</head>  
  
<body>  
 
    <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
        未闻花名
    </h1>  
 	
 	<div></div>
 	
 	<br/>
	<p class="sgcontentcolor sgcenter" style="clear:left;">
		<b>注意:</b>@keyframes可自定义属性动画<br/>
		animation属性绑定自定义的动画名称及运动时长<br/>
		IE9及更早版本 不支持animation属性<br/>
	</p>
	<footer id="copyright" style="clear:both;">  
        <p style="font-size:14px;text-align:center;font-style:italic;">  
        Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
        </p>        
	</footer>   
</body>  
</html>

效果如下:


CSS3动画是什么？

动画是使元素从一种样式  逐渐变化为  另一种样式的效果。

您可以改变任意多的样式,  任意多的次数。

请用百分比来规定变化发生的时间，

或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

注意: 该实例在 IE 9 及更早 IE 版本是无效的。

代码如下:

        div {
        	margin: auto;
        	width: 100px;
        	height: 100px;
        	background-color: red;
        	/*animation属性绑定动画名称及运动时长*/
        	animation:beyondAnimation 7s;
        	/*兼容Safari and Chrome*/
        	-webkit-animation:beyondAnimation 7s;
        	/*兼容Firefox*/
        	-moz-animation:beyondAnimation 7s;
        	/*兼容Opera*/
        	-o-animation:beyondAnimation 7s;
        }  
        /*@keyframes可自定义属性动画
		animation属性绑定自定义的动画名称及运动时长
		IE9及更早版本 不支持animation属性*/
		@keyframes beyondAnimation {
			0% {background-color: red;}
			16.66% {background-color: orange;}
			33.33% {background-color: yellow;}
			50% {background-color: green;}
			66.66% {background-color: blue;}
			83.33% {background-color: indigo;}
			100% {background-color: violet;}
		}
		/*兼容 Safari and Chrome*/
		@-webkit-keyframes beyondAnimation {
			0% {background-color: red;}
			16.66% {background-color: orange;}
			33.33% {background-color: yellow;}
			50% {background-color: green;}
			66.66% {background-color: blue;}
			83.33% {background-color: indigo;}
			100% {background-color: violet;}
		}
		/*兼容 Firefox*/
		@-moz-keyframes beyondAnimation {
			0% {background-color: red;}
			16.66% {background-color: orange;}
			33.33% {background-color: yellow;}
			50% {background-color: green;}
			66.66% {background-color: blue;}
			83.33% {background-color: indigo;}
			100% {background-color: violet;}
		}
		/*兼容 Opera*/
		@-o-keyframes beyondAnimation {
			0% {background-color: red;}
			16.66% {background-color: orange;}
			33.33% {background-color: yellow;}
			50% {background-color: green;}
			66.66% {background-color: blue;}
			83.33% {background-color: indigo;}
			100% {background-color: violet;}
		}

效果如下:


核心代码:

当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：

@keyframes beyondAnimation
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

   @-webkit-keyframes beyondAnimation /* Safari and Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}


颜色与位置同时改变的示例代码如下:

注意: 该实例在 IE 9 及更早 IE 版本是无效的

代码如下:

        div {
        	width: 72px;
        	height: 72px;
        	background-color: red;
        	/*定位:相对于自己原本的位置*/
        	position: relative;
        	/*animation属性绑定动画名称及运动时长*/
        	animation:beyondAnimation 5s;
        	/*兼容Safari and Chrome*/
        	-webkit-animation:beyondAnimation 5s;
        	/*兼容Firefox*/
        	-moz-animation:beyondAnimation 5s;
        	/*兼容Opera*/
        	-o-animation:beyondAnimation 5s;
        }  
        /*@keyframes可自定义属性动画
		animation属性绑定自定义的动画名称及运动时长
		IE9及更早版本 不支持animation属性*/
		@keyframes beyondAnimation {
			0% {background-color: red; left:0px; top:0px;}
			/*orange + yellow = blend */
			25% {background-color: #FECA0A; left:400px; top:0px;}
			50% {background-color: green; left:400px; top:100px;}
			/*blue + indigo = blend*/
			75% {background-color: #1D00B7; left:0px; top:100px;}
			100% {background-color: violet; left:0px; top:0px;}
		}
		/*兼容 Safari and Chrome*/
		@-webkit-keyframes beyondAnimation {
			0% {background-color: red; left:0px; top:0px;}
			/*orange + yellow = blend */
			25% {background-color: #FECA0A; left:400px; top:0px;}
			50% {background-color: green; left:400px; top:100px;}
			/*blue + indigo = blend*/
			75% {background-color: #1D00B7; left:0px; top:100px;}
			100% {background-color: violet; left:0px; top:0px;}
		}
		/*兼容 Firefox*/
		@-moz-keyframes beyondAnimation {
			0% {background-color: red; left:0px; top:0px;}
			/*orange + yellow = blend */
			25% {background-color: #FECA0A; left:400px; top:0px;}
			50% {background-color: green; left:400px; top:100px;}
			/*blue + indigo = blend*/
			75% {background-color: #1D00B7; left:0px; top:100px;}
			100% {background-color: violet; left:0px; top:0px;}
		}
		/*兼容 Opera*/
		@-o-keyframes beyondAnimation {
			0% {background-color: red; left:0px; top:0px;}
			/*orange + yellow = blend */
			25% {background-color: #FECA0A; left:400px; top:0px;}
			50% {background-color: green; left:400px; top:100px;}
			/*blue + indigo = blend*/
			75% {background-color: #1D00B7; left:0px; top:100px;}
			100% {background-color: violet; left:0px; top:0px;}
		}

效果如下:


核心代码:

改变背景色和位置：

@keyframes beyondAnimation
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

   @-webkit-keyframes beyondAnimation /* Safari and Chrome */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}


CSS3的动画属性

下面的表格列出了 @keyframes 规则和所有动画属性：

属性描述CSS
@keyframes规定动画。3
animation所有动画属性的简写属性，除了 animation-play-state 属性。3
animation-name规定 @keyframes 动画的名称。3
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。3
animation-timing-function规定动画的速度曲线。默认是 "ease"。3
animation-delay规定动画何时开始。默认是 0。3
animation-iteration-count规定动画被播放的次数。默认是 1。3
animation-direction规定动画是否在下一周期逆向地播放。默认是 "normal"。3
animation-play-state规定动画是否正在运行或暂停。默认是 "running"。3

下面两个例子设置所有动画属性

注意: 该实例在 IE 9 及更早 IE 版本是无效的。

代码如下:

        div {
        	width: 72px;
        	height: 72px;
        	background-color: red;
        	/*定位:相对于自己原本的位置*/
        	position: relative;
        	/*animation属性绑定动画名称及运动时长*/
        	animation-name:beyondAnimation;
        	animation-duration:5s;
        	/*ease还是linear*/
        	animation-timing-function:ease;
        	animation-delay:2s;
        	/*重复次数:无限重复*/
        	animation-iteration-count:infinite;
        	/*是否反转*/
        	animation-direction:alternate;
        	/*动画是暂停还是播放*/
        	animation-play-state:running;


        	/*兼容Safari and Chrome*/
        	/*animation属性绑定动画名称及运动时长*/
        	-webkit-animation-name:beyondAnimation;
        	-webkit-animation-duration:5s;
        	/*ease还是linear*/
        	-webkit-animation-timing-function:ease;
        	-webkit-animation-delay:2s;
        	/*重复次数:无限重复*/
        	-webkit-animation-iteration-count:infinite;
        	/*是否反转*/
        	-webkit-animation-direction:alternate;
        	/*动画是暂停还是播放*/
        	-webkit-animation-play-state:running;
        	
        }  
        /*@keyframes可自定义属性动画
		animation属性绑定自定义的动画名称及运动时长
		IE9及更早版本 不支持animation属性*/
		@keyframes beyondAnimation {
			0% {background-color: red; left:0px; top:0px;}
			/*orange + yellow = blend */
			25% {background-color: #FECA0A; left:400px; top:0px;}
			50% {background-color: green; left:400px; top:100px;}
			/*blue + indigo = blend*/
			75% {background-color: #1D00B7; left:0px; top:100px;}
			100% {background-color: violet; left:0px; top:0px;}
		}
		/*兼容 Safari and Chrome*/
		@-webkit-keyframes beyondAnimation {
			0% {background-color: red; left:0px; top:0px;}
			/*orange + yellow = blend */
			25% {background-color: #FECA0A; left:400px; top:0px;}
			50% {background-color: green; left:400px; top:100px;}
			/*blue + indigo = blend*/
			75% {background-color: #1D00B7; left:0px; top:100px;}
			100% {background-color: violet; left:0px; top:0px;}
		}
		/*兼容 Firefox*/
		@-moz-keyframes beyondAnimation {
			0% {background-color: red; left:0px; top:0px;}
			/*orange + yellow = blend */
			25% {background-color: #FECA0A; left:400px; top:0px;}
			50% {background-color: green; left:400px; top:100px;}
			/*blue + indigo = blend*/
			75% {background-color: #1D00B7; left:0px; top:100px;}
			100% {background-color: violet; left:0px; top:0px;}
		}
		/*兼容 Opera*/
		@-o-keyframes beyondAnimation {
			0% {background-color: red; left:0px; top:0px;}
			/*orange + yellow = blend */
			25% {background-color: #FECA0A; left:400px; top:0px;}
			50% {background-color: green; left:400px; top:100px;}
			/*blue + indigo = blend*/
			75% {background-color: #1D00B7; left:0px; top:100px;}
			100% {background-color: violet; left:0px; top:0px;}
		}

效果如下:


核心代码:

运行beyondAnimation动画，设置所有的属性：

div
{
animation-name: beyondAnimation;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: beyondAnimation;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}

注意: 该实例在 IE 9 及更早 IE 版本是无效的。

简写属性,代码如下:

        div {
        	width: 72px;
        	height: 72px;
        	background-color: red;
        	/*定位:相对于自己原本的位置*/
        	position: relative;
        	/*animation属性绑定动画名称及运动时长*/
        	animation:beyondAnimation 5s ease 2s infinite alternate;

        	/*兼容Safari and Chrome*/
        	-webkit-animation:beyondAnimation 5s ease 2s infinite alternate;
        	/*兼容Firefox*/
        	-moz-animation:beyondAnimation 5s ease 2s infinite alternate;
        	/*兼容Opera*/
        	-o-animation:beyondAnimation 5s ease 2s infinite alternate;
        }  
        /*@keyframes可自定义属性动画
		animation属性绑定自定义的动画名称及运动时长
		IE9及更早版本 不支持animation属性*/
		@keyframes beyondAnimation {
			0% {background-color: red; left:0px; top:0px;}
			/*orange + yellow = blend */
			25% {background-color: #FECA0A; left:400px; top:0px;}
			50% {background-color: green; left:400px; top:100px;}
			/*blue + indigo = blend*/
			75% {background-color: #1D00B7; left:0px; top:100px;}
			100% {background-color: violet; left:0px; top:0px;}
		}
		/*兼容 Safari and Chrome*/
		@-webkit-keyframes beyondAnimation {
			0% {background-color: red; left:0px; top:0px;}
			/*orange + yellow = blend */
			25% {background-color: #FECA0A; left:400px; top:0px;}
			50% {background-color: green; left:400px; top:100px;}
			/*blue + indigo = blend*/
			75% {background-color: #1D00B7; left:0px; top:100px;}
			100% {background-color: violet; left:0px; top:0px;}
		}
		/*兼容 Firefox*/
		@-moz-keyframes beyondAnimation {
			0% {background-color: red; left:0px; top:0px;}
			/*orange + yellow = blend */
			25% {background-color: #FECA0A; left:400px; top:0px;}
			50% {background-color: green; left:400px; top:100px;}
			/*blue + indigo = blend*/
			75% {background-color: #1D00B7; left:0px; top:100px;}
			100% {background-color: violet; left:0px; top:0px;}
		}
		/*兼容 Opera*/
		@-o-keyframes beyondAnimation {
			0% {background-color: red; left:0px; top:0px;}
			/*orange + yellow = blend */
			25% {background-color: #FECA0A; left:400px; top:0px;}
			50% {background-color: green; left:400px; top:100px;}
			/*blue + indigo = blend*/
			75% {background-color: #1D00B7; left:0px; top:100px;}
			100% {background-color: violet; left:0px; top:0px;}
		}

效果跟html_352.html的效果一毛一样

核心代码:

与上面的动画相同，但是使用了简写的动画 animation 属性：

div
{
animation: beyondAnimation 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation: beyondAnimation 5s linear 2s infinite alternate;
}

上面两个例子设置所有动画属性，您最好都看几遍，并且自己操作一下！



未完待续,下一章节,つづく



pre_eminent
关注
专栏目录
CSS3的2D转换和3D转换，你了解了嘛？
wj624的博客
08-19 872
css3的2D转换和3D转换 CSS3大纲： 本次讲解css3带来了两种转换：2D转换和3D转换 1. 2D转换 转换( transform)是CSS3中具有颠覆性的特征之一，可以实现元素的位移(transform)、旋转(rotate)、缩放(scale)等效果 2D转换是改变标签在二维平面上的位置和形状的一种技术，要先学习二维坐标系。 1.1 2D转换之移动 transform ​ 2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。 语法格式： transform: tra
CSS3新增属性——过渡和动画（2D属性，3D动画）
m0_53619602的博客
06-07 3133
目录CSS3一、过渡1. 属性2. 花费时间3. 运动曲线4. 何时开始二、2D属性 2. translate（移动）2. rotate（旋转）3. scale（缩放）4. transform-origin（转换中心点）综合写法三、动画 1. 动画的使用1）.定义动画（keyframes）2） 元素使用动画 2. 动画序列3. 动画属性4. 动画属性简写四、3D动画 1. 三维坐标系 2. 3D移动 translate3d3. 透视 perspective 4. 3D旋转5. 3D呈现 （tran
2D3D转换
DGL_CSDN的博客
08-31 759
1 2D转换 转换是 CSS3 中具有颠覆性的⼀个特征，可以实现元素的位移、旋转、变形、缩放。 通过 transform 转换来实现 2D 转换或者 3D 转换。 2D转换包括： 缩放 移动 旋转 倾斜 1.1 scale 设置元素的缩放效果 语法： transform: scale(x, y); transform: scale(2, 0.5); 参数： x：表示水平方向的缩放倍数 y：表示垂直方向的缩放倍数 注
CSS_2D/3D转换
dolola的博客
01-31 233
transform:translate(50px,100px);左侧为X轴，顶部为y轴，根据给定的参数移动 transform: rotate(30deg); 旋转，正数为顺时针负数为逆时针 transform: scale(2,3); 缩放，第一个值为宽度的倍数，第二个值为高度的倍数 transform: skew(30deg,20deg);第一个值为水平的倾斜角度，正值向左，负值向右
2D转换和3D转换
TKOP_的博客
12-21 737
2D转换和3D转换也是css3新增的重要内容。
CSS中2d3d转换
zzyhhh的博客
08-28 439
2D 转换 1、translate() 方法 通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数： 实例 div { transform: translate(50px,100px); } 值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。 2、rotate() 方法 通...
CSS3D_Carousel:在图像3D幻灯片上应用CSS
05-17
"CSS3D_Carousel"是一个这样的示例，它展示了如何通过CSS3D将3D转换应用于图像幻灯片，从而创造出引人注目的视觉效果。在这个项目中，CSS3D技术结合了JavaScript，以实现平滑的动画和用户交互。 **CSS3D 概述** ...
css3bianqian_HTML5_CSS3源码_
10-01
4. **转换（Transforms）**：允许元素进行旋转、缩放、平移等2D或3D变换。 5. **过渡（Transitions）**：平滑地改变一个属性值的过程，用于创建动画效果。 6. **动画（Animations）**：通过@keyframes规则定义动画，...
7phtext_HTML5_CSS3源码_
09-29
- **转换（Transforms）**：允许对元素进行2D和3D旋转、缩放、平移和倾斜。 - **滤镜（Filters）**：如模糊、灰度、饱和度调整等，可以增强或改变元素的视觉效果。 - **阴影（Shadows）**：包括文字阴影和盒阴影...
screenslides_HTML5_CSS3源码_源码
10-02
1. `transform` 属性：用于元素的2D/3D转换，如平移、旋转、缩放等，常用于创建滑动过渡效果。 2. `transition` 属性：定义元素从一种样式到另一种样式的过渡效果，比如在切换幻灯片时添加平滑的过渡。 3. `...
2D,3D转换以及动画
最新发布
m0_73638967的博客
02-07 172
2D,3D转换以及动画
css基础--2D、3D转换
zxn200125的博客
10-21 269
css中2d、3d转换相关属性及其使用
web前端之CSS3（3）：2D和3D转换
薛定谔的猫-前端领域
05-11 1152
CSS3 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。 2D 转换 以下列出了所有的转换属性: Property 描述 CSS transform 适用于2D或3D转换的元素 3 transform-origin 允许您更改转化元素位置 3 transform属性2D变换方法： translate()：根据左(X轴)和顶部(Y轴...
2d旋转（css3实现过度效果和动画效果）
dengluandai1740的博客
02-18 263
效果： 　　 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> ...
CSS3中的变形功能-transform功能
z983002710的博客
07-30 4277
CSS3中的变形功能-transform功能
2D转换和3D转换 transform
liu0218的博客
08-13 1496
2D和3D转换，进行位移，旋转，缩放等等
论文翻译——Rapid 2D-to-3D conversion——快速2D到3D转换
YIOH的博客
05-03 4584
       目前想做一个关于2D转3D的项目，由于国内资料比较少而且大部分都是基于国外的研究资料优化而来，所以想翻译翻译国外的论文，强化自己的理解，同时方便他人，英文水平有限，尽量做到“信达雅”的信，争取下达，如有错误，希望大家指正。文末提供论文原文PDF下载。以下为正文。快速2D到3D转换摘要从现有2D图像到3D的转换已经被证明了是商业上可行的，并且满足了日益增长的对高质量立体影像的需求。当面...
CSS3 2D转换&3D转换
江浙沪柯蓝
01-17 3607
1、transform属性方法 Transform 方法 2、2D转换 translate()方法 .div1 { width: 100px; height: 100px; background: #00ff21; transform: translate(100
2D和3D转换
qq_45052409的博客
07-04 2458
转换（transform） transform 是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放。 要想学好2D和3D转换要先对 坐标 有一定了解 2D 2维坐标系 2D转换中的 属性 在使用转换是我们要先给元素添加转换属性 transform(x,y)，X代表X轴，Y代表Y轴 1.移动 translate 当我们要移动盒子时，可以给盒子添加 transform:translate(50px,50px); 属性 让盒子做到移动效果(小括号里可以使用百分比%) 2.旋转 r
CSS3动画详解：过渡、动画与2D/3D变换
CSS3动画效果小结提供了对三种关键动画功能的深入理解：transition(过渡属性)，animation(动画属性)，以及transform(2D/3D转换属性)。下面将详细解析这些概念。 1. **Transition (过渡属性)**: 这是一种渐进式改变...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值