Cs3中的transition变换-transform变换
- transform属性
- transform-origin基点属性
提示:
博主:章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041
transform属性
之前已经使用过关于transform相关的属性了。如rotate,但是并没有具体研习过其属性具体的属性值是什么。在这里详细的说明一下相关的介绍一下
transform:rotate(deg)旋转属性
rotate本来就是旋转的意思,在这里也是,其转换特性是其旋转的度数
属性值 | 属性值的含义 |
---|---|
rotate | 旋转,默认是绕其中心点进行旋转操作 |
rotateX | 绕着X轴旋转 |
rotateY | 绕着Y轴开始旋转 |
rotateZ | 绕着Z轴开始旋转,默认是绕着Z轴方向进行旋转的 |
注意:rotate中的填写的参数可以有三种形式:deg,turn,rad
deg很直白,就是角度的意思。turn为圈数的单位,rad是弧度的意思。并且如果你想让其往相反方向进行旋转的话,这个时候可能需要的在其前面添加一个负号
因为其有一个rotateZ,说明其可以在立体三维z轴方向上进行旋转,首先可以了解一下其旋转方向的相关东西
从上图中就可以看到x,y,z的正轴方向以及其反向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
div{width: 1200px;margin:50px auto;box-shadow: 0 0 10px 0 deeppink;border: 1px solid transparent}
div p{width: 100px;height: 100px;line-height: 100px;text-align: center;background: green;margin: 30px;transition: 2s}
div p:nth-child(1):hover{transform: rotate(180deg)}
/*div p:nth-child(1):hover{transform: rotate(0.5turn)}*/
div p:nth-child(2):hover{transform: rotateX(-180deg)}
div p:nth-child(3):hover{transform: rotateY(180deg)}
div p:nth-child(4):hover{transform: rotateZ(180deg)}
</style>
</head>
<body>
<div class="main">
<p>rotate</p>
<p>rotateX</p>
<p>rotateY</p>
<p>rotateZ</p>
</div>
</body>
</html>
显示效果如下所示:
注意:默认的情况下是绕着Z轴开始旋转的
transform:scale缩放属性
scale是缩放的意思,其也是有多个属性值的,并且其内部可以有多个参数,如
transform: scale(0.2,1.2);
transform: scale(0.2);
当一个值的时候既代表X轴又代表Y轴,当两个值的时候,第一个代表的是X轴,第二个代表的是Y轴
属性值 | 属性值的含义 |
---|---|
scale | 缩放,一个值代表X,Y轴,两个值中第一个代表X,第二个代表Y |
scaleX | 沿着X轴开始缩放 |
scaleY | 沿着Y轴开始缩放 |
scaleZ | 沿着Z轴开始缩放 |
注意:
当里面的值大于1的时候,表示放大原来的多少倍
当里面的值小于1的时候,表示缩小为原来的多少倍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
div{width: 1200px;margin:50px auto;box-shadow: 0 0 10px 0 deeppink;border: 1px solid transparent}
div p{width: 100px;height: 100px;line-height: 100px;text-align: center;background: green;margin: 30px;transition: 2s}
div p:nth-child(1):hover{transform: scale(2)}
div p:nth-child(2):hover{transform: scaleX(0.5)}
div p:nth-child(3):hover{transform: scaleY(1.5)}
div p:nth-child(4):hover{transform: scaleZ(0.2)} /**对于2d图形来说,在z轴方向上面其实并没有什么效果*/
</style>
</head>
<body>
<div class="main">
<p>scale</p>
<p>scaleX</p>
<p>scaleY</p>
<p>scaleZ</p>
</div>
</body>
</html>
注意的是,这个z轴缩放,针对二维的图形来说,scaleZ其实并没有多少效果显示出来,但是对3D图形的话,这个就是可以的
transform:translate(X,Y)位移属性
transform:translate位移属性,唯一之后,原来的位置是不会被其他的元素占用的,兵器移动到其他位置的时候,不会去影响其他元素的站位,
当一个值的时候代表的是X轴方向上移动
两个值的时候,第一个值代表的是X轴,第二个值代表的是y轴的方向
transform:translate(100px)
transform:translate(100px,100px);
属性值 | 属性值的含义 |
---|---|
translate | 位移,一个值代表X,Y轴,两个值中第一个代表X,第二个代表Y |
translateX | 沿着X轴开始位移 |
translateY | 沿着Y轴开始位移 |
translateZ | 沿着Z轴开始位移, |
注意:位移后元素的初始位置依然占据,且移动后并不会影响其他元素的布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
div{width: 1200px;margin:50px auto;box-shadow: 0 0 10px 0 deeppink;border: 1px solid transparent}
div p{width: 100px;height: 100px;line-height: 100px;text-align: center;background: deeppink;margin: 30px;transition: 2s}
div p:nth-child(1):hover{transform: translate(100px,100px)}
div p:nth-child(2):hover{transform: translateX(100px)}
div p:nth-child(3):hover{transform: translateY(100px)}
div p:nth-child(4):hover{transform: translateZ(50px)} /**需要3D环境支持的时候,才有效果*/
</style>
</head>
<body>
<div class="main">
<p>translate</p>
<p>translateX</p>
<p>translateY</p>
<p>translateZ</p>
</div>
</body>
</html>
显示效果如下所示:
transform:skew(deg)旋转属性
transform: skew() 倾斜 单位:角度
只有一个值的时候,往x轴方向倾斜
两个值的时候,第一个值代表x轴,第二个值代表y轴
属性值 | 属性值的含义 |
---|---|
skew | 只有一个值的时候,往x轴方向倾斜,两个值的时候,第一个值代表x轴,第二个值代表y轴 |
skewX | 沿着X轴开始倾斜 |
skewY | 沿着Y轴开始倾斜 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
div{width: 1200px;margin:50px auto;box-shadow: 0 0 10px 0 deeppink;border: 1px solid transparent}
div p{width: 100px;height: 100px;line-height: 100px;text-align: center;background: green;margin: 30px;transition: 2s}
div p:nth-child(1):hover{transform: skew(30deg)}
div p:nth-child(2):hover{transform: skew(30deg,30deg)}
div p:nth-child(3):hover{transform: skewX(30deg)}
div p:nth-child(4):hover{transform: skewY(30deg)}
</style>
</head>
<body>
<div class="main">
<p>skew</p>
<p>skew</p>
<p>skewX</p>
<p>skewY</p>
</div>
</body>
</html>