CSS3的2D转换3D转换和过渡
Posted 互联网IT信息
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3的2D转换3D转换和过渡相关的知识，希望对你有一定的参考价值。
1CSS3的2D转换
ranslate() 方法
translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
效果图：
代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>transform-translate</title>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:translate(50px,50px);
-ms-transform:translate(50px,50px); /* IE 9 */
-webkit-transform:translate(50px,50px); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>
rotate() 方法
rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
效果图：
代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>transform-rotate</title>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>你好。这是一个 DIV 元素。</div>
<div id="div2">你好。这是一个 DIV 元素。</div>
</body>
</html>
scale() 方法
scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数
效果图：
代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>transform-scale</title>
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
border: 1px solid black;
-ms-transform: scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */
}
</style>
</head>
<body>
<p>scale() 方法用于增加或缩小元素的大小。</p>
<div>
div 元素的宽带是原始大小的两倍，高度是原始大小的三倍。
</div>
</body>
</html>
skew() 方法
skew()方法，该元素会根据横向（X轴）和垂直（Y轴）线参数给定角度：
效果图：
代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>transform-skew</title>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg); /* IE 9 */
-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>
matrix() 方法
matrix()方法和2D变换方法合并成一个。
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
效果图：
代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>transform-matrix</title>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
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 */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>
2CSS3的3D转换
CSS3 允许您使用 3D 转换来对元素进行格式化。
rotateX() 方法
rotateX()方法，围绕其在一个给定度数X轴旋转的元素。
效果图：
代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>transform</title>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotateX(120deg);
-webkit-transform:rotateX(120deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9 (以及更早版本的浏览器) 和 Opera 不支持 rotateX 方法.</p>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>
rotateY() 方法
rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。
效果图：
代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>transformy</title>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotateY(130deg);
-webkit-transform:rotateY(130deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9 (以及更早版本的浏览器) 和 Opera 不支持 rotateY方法.</p>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>
3CSS3的过渡
CSS3 过渡
CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或javascript。属性介绍如图：
案例：效果图：
代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>transition</title>
<style>
div
{
width:100px;
height:100px;
background:red;
transition:width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
div:hover
{
width:200px;
}
</style>
</head>
<body>
<div></div>
<p>鼠标移动到 div 元素上，查看过渡效果。</p>
<p><b>注意：</b> 过渡效果需要等待两秒后才开始。</p>
</body>
</html>
以上是关于CSS3的2D转换3D转换和过渡的主要内容，如果未能解决你的问题，请参考以下文章