本文摘自PHP中文网，作者php中世界最好的语言，侵删。
这次给大家带来HTML与CSS中2D转换模块，HTML与CSS中2D转换模块的注意事项有哪些，下面就是实战案例，一起来看一下。一. 2D转换模块
2D转换模块
/*其中deg是单位, 代表多少度*/
transform: rotate(45deg);/*
第一个参数:水平方向
第二个参数:垂直方向
*/transform: translate(100px, 0px);/*
第一个参数:水平方向
第二个参数:垂直方向
注意点:
如果取值是1, 代表不变
如果取值大于1, 代表需要放大
如果取值小于1, 代表需要缩小
如果水平和垂直缩放都一样, 那么可以简写为一个参数
*//*transform: scale(0.5, 0.5);*/transform: scale(1.5);/*
注意点:
1.如果需要进行多个转换, 那么用空格隔开
2.2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的
*/transform: rotate(45deg) translate(100px, 0px);
2D转换模块
二. 2D转换模块-形变中心点
默认情况下所有的元素都是以自己的中心点作为参考来旋转的, 我们可以通过形变中心点属性来修改它的参考点
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | transform-origin: left top;
|
三.透视属性(perspective: 500px;) 和 旋转轴向 (transform: rotateY(45deg);)
1.perspective: 500px;
1.1什么是透视
近大远小
1.2.注意点
一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面
2.transform: rotateY(45deg);
想围绕哪个轴旋转, 那么只需要在rotate后面加上哪个轴即可;
代码示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html lang="en"> <head>
<meta charset="UTF-8">
<title>95-2D转换模块-旋转轴向</title>
<style>
*{ margin: 0; padding: 0; }
ul{ width: 800px; height: 500px; margin: 0 auto; }
ul li{ list-style: none; width: 200px; height: 200px; margin: 0 auto; margin-top: 50px; border: 1px solid #000;
perspective: 500px; } ul li img{ width: 200px; height: 200px;
} ul li:nth-child(1){
transform: rotateZ(45deg); } ul li:nth-child(2) img{ transform: rotateX(45deg); } ul li:nth-child(3) img{ transform: rotateY(45deg); } </style> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>
|
四. 扑克牌练习
1 2 3 4 5 6 7 8 9 10 11 12 13 | <html lang="en">
<head>
<meta charset="UTF-8">
<title>96-2D转换模块-练习</title>
<style>
*{ margin: 0; padding: 0; }
p{ width: 310px; height: 438px; border: 1px solid #000;
background-color: skyblue; margin: 100px auto; perspective: 500px; }
p img{ transform-origin: center bottom; transition: transform 1s; }
p:hover img{ transform: rotateX(80deg); }
</style> </head> <body> <p>  </p>
</body>
</html>
|
五. 照片墙
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <html lang="en">
<head>
<meta charset="UTF-8">
<title>97-2D转换模块-相片墙</title>
<style>
*{ margin: 0; padding: 0; }
ul{ height: 400px; border: 1px solid #000;
background-color: skyblue; margin-top: 100px;
text-align: center; }
ul li{ list-style: none;
width: 150px; height: 200px;
background-color: red; display: inline-block;
margin-top: 100px; transition: all 1s;
position: relative; box-shadow: 0 0 10px; }
ul li:nth-child(1){ transform: rotate(30deg); }
ul li:nth-child(2){ transform: rotate(-40deg); }
ul li:nth-child(3){ transform: rotate(10deg); }
ul li:nth-child(4){ transform: rotate(45deg); }
ul li img{ width: 150px; height: 200px;
border: 5px solid #fff; box-sizing: border-box;
}
ul li:hover{
transform: scale(1.5);
z-index: 998;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
|
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
网页的布局方式之清除浮动
网页的布局方式与浮动
HTML与CSS的盒子模型
CSS的背景与精灵图
以上就是HTML与CSS中2D转换模块的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
css的基本选择器有哪几种
css中的比较函数：max()、min()、clamp()
css设置文字外发光效果
Html中必须掌握的知识点有哪些
Html怎么用title属性让鼠标悬停处显示文字
ie css背景图片不显示怎么办
css是什么含义
Html如何使用title属性让鼠标悬停来显示文字
css a怎么去掉下划线
Html标签元素有哪些种类？Html的常用标签元素的介绍
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » HTML与CSS中2D转换模块
