7、2D变换

深藏阁楼爱情的钟 2022-04-22 09:15 163阅读 0赞

CSS3中的 transform 属性允许你修改CSS视觉格式模型的坐标空间。使用它，元素可以被转换（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）。并且transform只能用于block块级元素。详解参见 [https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform][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指定原点，后面会进行示例。

[https_developer.mozilla.org_zh-CN_docs_Web_CSS_transform]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform