transform属性

最新推荐文章于 2023-02-08 10:37:57 发布

weixin_30322405

最新推荐文章于 2023-02-08 10:37:57 发布

阅读量113

点赞数

原文链接：http://www.cnblogs.com/wangshengli520/p/8037597.html

版权

transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜

transform属性---2D位置移动

1.translate(x,y)

定义：

基于原来的位置，沿X轴平移，长度为x，沿Y轴平移，长度为y

语法：

transform：translate(x,y);

2.translateX(x)

定义：

基于原来的位置，沿X轴平移，长度为x

语法：

transform：translateX(x);

3.translateY(y)

定义：

基于原来的位置,沿Y轴平移，长度为y

语法：

transform：translateY(y);

transform属性---3D位置移动

1.translate3d(x,y,z)

定义：

基于原来的位置,沿X轴平移，长度为x,沿Y轴平移，长度为y,沿Z轴平移，长度为z

语法：

transform：translate3d(x,y,z);

2.translateZ(z)

定义：

基于原来的位置,沿Z轴平移，长度为z

语法：

transform：translateZ(z);

transform属性---2D缩放转换

1.scale(x,y)

定义：

基于原来的位置进行伸缩变换，其中x代表沿X轴的伸缩倍数，y代表沿Y轴的伸缩倍数

语法：

transform：scale(x,y);

2.scaleX(x)

定义：

基于原来的位置进行伸缩变换，其中x代表沿X轴的伸缩倍数

语法：

transform：scale(x);

3.scaleY(y)

定义：

基于原来的位置进行伸缩变换，其中y代表沿Y轴的伸缩倍数

语法：

transform：scale(y);

transform属性---3D缩放转换

1.scale3d(x,y,z)

定义：

基于原来的位置进行伸缩变换，其中x代表沿X轴的伸缩倍数，y代表沿Y轴的伸缩倍数，z代表沿Z轴的伸缩倍数

语法：

transform：scale3d(x,y,z);

2.scaleZ(z)

定义：

基于原来的位置进行伸缩变换，其中z代表沿Z轴的伸缩倍数

语法：

transform：scaleZ(z);

transform属性---2D旋转

1.rotate(angle)

定义：

以图形的几何中心点为旋转中心，顺时针旋转角度为angle

语法：

transform：rotate(angle);

2.rotateX(x)

定义：

绕X轴方向旋转，顺时针旋转角度为angle

语法：

transform：rotateX(x);

3.rotateZ(z)

定义：

绕Y轴方向旋转，顺时针旋转角度为angle

语法：

transform：rotateZ(z);

transform属性---3D旋转

1.rotate3d(x,y,z,angle)

定义：

同时绕X,Y,Z轴三个方向旋转，顺时针旋转角度为angle

语法：

transform：rotate3d(x,y,z,angle);

2.rotateZ(z)

定义：

绕Z轴方向旋转，顺时针旋转角度为angle

语法：

transform：rotateZ(z);

实例演示1

html文件

[html] view plain copy

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div id="pic">
<img src="img/6.jpg" width="212" height="300"/>
<p>像少年啦飞驰</p>
</div>
</body>
</html>

css文件

[css] view plain copy

*{
margin: 0;
padding: 0;
}
#pic{
width: 212px;
height: 300px;
margin: 100px auto;
border: 2px solid gainsboro;
box-shadow: 0 0 8px darkgray;
position: relative;
}
#pic p{
width: 212px;
height: 300px;
background: whitesmoke;
text-align: center;
line-height: 300px;
font-family: "微软雅黑";
opacity: 0;
/*
* 定义初始状态的transform属性
* transition定义变换属性和周期，此处为所有属性，周期2s
*/
transform: translateY(-303px) rotate(130deg) rotateY(-270deg) rotateX(100deg) scale(0.5,0.5);
transition: all 2s;
}
#pic:hover p{
opacity: 1;
/*
* 定义变换后的状态
*/
transform: translateY(-303px) rotate(0deg) rotateY(0deg) rotateX(0deg) scale(1,1);
}

实例演示2

html文件

[html] view plain copy

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div id="pic">
<img src="img/6.jpg" width="212" height="300"/>
<p>我的世界就如一座城池</p>
</div>
</body>
</html>

css文件

[css] view plain copy

1. *{
2. margin: 0;
3. padding: 0;
4. }
5. #pic{
6. width: 212px;
7. height: 300px;
8. border: 5px solid whitesmoke;
9. box-shadow: 0 0 0 8px pink;
10. margin: 100px auto;
11. overflow:hidden;
12. position: relative;
14. }
15. #pic:hover img{
16. transform: scale(1.5,1.5);
17. transition: all 2s;
18. }
19. #pic p{
20. width: 212px;
21. height: 20px;
22. background: black;
23. opacity: 0.5;
24. position: absolute;
25. bottom: -20px;
26. color: white;
27. font-family: "微软雅黑";
28. font-size: 13px;
29. text-align: center;
31. }
32. #pic:hover p{
33. bottom: 0px;
34. transition: bottom 1s;
35. }

转载于:https://www.cnblogs.com/wangshengli520/p/8037597.html

weixin_30322405

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
transform属性

transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜transform属性---2D位置移动1.translate(x,y)定义：基于原来的位置，沿X轴平移，长度为x，沿Y轴平移，长度为y语法： transform：translate(x,y); ...
复制链接

扫一扫