HTML+CSS学习11-2D转换3D转换与动画

2D转换

页面左上角为原点，左上角到右上角为x轴正方向，左上角到左下角为y轴正方向

转换transform

可以实现元素位移、旋转、缩放等

移动translate

改变元素在页面中的位置，类似定位

transform: translate(x,y);  //沿x轴 y轴移动元素，像素值或百分比
transform: translateX(值);
transform: translateY(值);  //值可以是像素值，或者百分比

translate不会影响其他元素的位置
如果用百分比作为移动单位，是相对于自身原来的位置移动，对应自身宽高的百分比
对行内标签没有效果

div{
	width:200px;
	height:100px;
	background-color:red;
	transform:translate(50px,50px);   //相对原来自身位置 向右移动50px，向下移动50px
}

div{
	width:200px;
	height:100px;
	background-color:red;
	transform:translateX(50px);  //相对原来自身位置 向右移动50px
}

div{
	width:200px;
	height:100px;
	background-color:red;
	transform:translate(50%,50%);   //相对原来自身位置 向右移动100px，向下移动50px
}

span{
	transform:translateX(50px);    //位置不变，对行内元素无效
}

旋转rotate

让元素在二维平面顺时针、逆时针旋转

transform:rotate(度数);    //单位是deg，必须写  
                     //度数为正顺时针  度数为负逆时针  默认旋转点为元素中心点

div{
	width:200px;
	height:100px;
	background-color:red;
	transform:rotate(45deg);   //以元素中心点 顺时针旋转45度
}

rotate应用：下拉三角的制作

div{
	width: 50px;
	height: 50px;
	border: 1px solid transparent;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	transform: rotate(45deg);
}

转换中心点transform-origin

设置元素的转换中心点

transform-origin: x y;   //x y默认为元素的中心点 50% 50% 
                         //可以填像素值，百分比，方位名词（top left..）

div{
		width:200px;
		height:100px;
		background-color:red;
		transform-origin: left bottom;   //以左下角为旋转点，顺时针旋转45度
		transform: rotate(45deg);
}

div{
		width:200px;
		height:100px;
		background-color:red;
		transform-origin: 50px 50px;
		                 //以左上角为原点，右移50px，下移50px的位置作为旋转点，顺时针旋转45度
		transform: rotate(45deg);
}

缩放scale

控制元素放大缩小

transform:scale(x,y);  //x y无单位，意为放大缩小的倍数

transform:scale(1,1);  //宽高都不变
transform:scale(2,2);  //宽高都变成原来的两倍
//相当于
transform:scale(2);
transform:scale(0.5,0.5);  //宽高都变成原来的一半

可以设置中心点缩放
不影响其他元素位置

scale应用：页码条随鼠标响应

ul li{
	list-style: none;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 1px solid #ccc;
	background-color: #fff;
	float: left;
	padding: 2px;
	margin: 3px;
	text-align: center;
	line-height: 50px;
}
ul li:hover{
	transform: scale(1.2);   //鼠标悬停放大1.2倍
}

2D转换综合写法

transform: translate() rotate() scale()...

顺序会影响转换效果，先旋转（rotate）会改变坐标轴方向
同时拥有位移和其他属性，将位移（translate）放在最