2D转换模块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>55-2D转换模块</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 800px;
height: 500px;
border: 1px solid #000;
margin: 0 auto;
}
ul li{
list-style: none;
width: 100px;
height: 50px;
background-color: red;
margin: 0 auto;
text-align: center;
line-height: 50px;
margin-top: 50px;
}
ul li:nth-child(2){
/*其中dge是单位*/
transform: rotate(40deg);
}
ul li:nth-child(3){
/*第一个参数水平，第二个参数垂直*/
transform: translate(200px,50px);
}
ul li:nth-child(4){
/*
第一个参数水平，第二个参数垂直
注意点：
如果取值是1，代表不变
如果取值大于1，代表需要放大
如果取值小于1，代表需要缩小
如果水平垂直缩放都一样，那么可以简写为一个参数
*/
transform:scale(1.5,0.5);
}
ul li:nth-child(5){
/*
注意点：
1.如果需要进行多个转换，那么用空格隔开
2.2D的转换模块会修改元素的坐标系，所以旋转以后再平移，就不是水平平移了
*/
transform: rotate(45deg) translate(200px,50px) scale(1.5,0.5);
}
</style>
</head>
<body>
<ul>
<li>正常的</li>
<li>旋转的</li>
<li>平移的</li>
<li>缩放的</li>
<li>综合的</li>
</ul>
</body>
</html>
2D转换模块之形变中心点及旋转轴向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D转换模块形变中心点</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 300px auto;
position: relative;
/*
1.什么是透视
近大远小
值越大，效果越大
2.注意点：
一定要注意，透视属性必须添加到需要呈现近大远小效果的
元素的父元素上面（上级元素也可，最好为父级）
*/
perspective: 200px;
}
ul li{
list-style: none;
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
/*
第一个参数：水平方向
第二个参数：垂直方向
注意点：
取值有三种形式
1具体像素
2百分比
3特殊关键字
*/
/*transform-origin: 200px 200px;*/
/*transform-origin: 0 100%;*/
transform-origin: center center;
}
ul li:nth-child(1){
/*
默认情况下所有的元素都是以自己的中心点作为参考来旋转的，
我们可以通过形变中心点属性来修改它的参考点
*/
background-color: red;
/*transform: rotate(30deg);*/
/*
默认情况下所有的元素都是围绕Z轴进行旋转
想围绕哪个轴转，那么只需要在rotate后面加上哪个轴即可
*/
transform: rotateX(30deg);
}
ul li:nth-child(2){
background-color: green;
transform: rotateY(50deg);
}
ul li:nth-child(3){
background-color: blue;
transform: rotate(70deg);
}
</style>
</head>
<body>
<!--
-->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>