7、2D变换

版权声明:转载请注明出处 https://blog.csdn.net/u010502101/article/details/83692018

CSS3中的 transform 属性允许你修改CSS视觉格式模型的坐标空间。使用它,元素可以被转换(translate)、旋转(rotate)、缩放(scale)、倾斜(skew)。并且transform只能用于block块级元素。详解参见 https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform

关于几种转换形式,参看如下示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
		html, body{
			height: 100%;
			overflow: hidden;
		}
			#test{
				width: 400px;
				height: 200px;
				background: blue;
				position: absolute;
				left: 0px;
				right: 0px;
				top: 0px;
				bottom: 0px;
				margin: auto;
				
				transition-duration: 3s;
				/*transform-origin: left top;*/
			}
			#test:hover{
				/*1、绕div的中心旋转45度*/
				/*transform: rotate(90deg);*/
				/*2、以div的中心,宽度不变,高变为原来的2倍*/
				/*transform: scale(1, 2);*/
				/*4、以div的中心,宽度不变,高变为原来的2倍*/
				/*transform: scaleY(2);*/
				/*5、以div的中心,高度不变,宽变为原来的0.5倍*/
				/*transform: scaleX(0.5);*/
				/*6、以div的中心,沿X轴和Y轴的正方向分别旋转45度*/
				/*transform: skew(45deg, 45deg);*/
				/*7、以div的中心,沿y轴正方向旋转45度*/
				/*transform: skewY(45deg);*/
				/*8、以div的中心,向右向上分别移动100px*/
				/*transform: translate(100px, -100px);*/
				/*9、以div的中心,向左移动100px*/
			/*transform: translateX(-100px);*/
			/*10、变换组合,宽变为原来的一半并向下移动100px*/
			transform: scale(0.5, 1) translateY(100px);
			}
		</style>
	</head>
	<body>
		<div id="test">
			
		</div>
	</body>
</html>

上述默认都是按元素的中心为参照原点进行旋转的,当然也可以用transform-origin指定原点,后面会进行示例。

展开阅读全文

没有更多推荐了,返回首页