css3--transform属性

最新推荐文章于 2025-04-01 17:11:18 发布

原创最新推荐文章于 2025-04-01 17:11:18 发布 · 955 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #javascript

javascript 同时被 2 个专栏收录

13 篇文章

订阅专栏

css3

6 篇文章

订阅专栏

本文详细介绍了CSS中的transform属性及其各种变形方法，包括平移、旋转、缩放和斜切等，并通过实例展示了如何使用这些属性来实现动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、基本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>06</title>
		<style>
			.total{
				width: 200px;
				height: 200px;
				border: 2px solid #8FA1FF;
				margin: 50% 50%;
			}
			.one{
				width: 200px;
				height: 200px;
				border: 3px solid #ADFF2F;
				
				/*
				 transform: none;
				 transform: matrix(1,0.5,0.1,1,0,0);1/2参数为水平、3/4参数为垂直、5/6参数为位置xy轴
				 transform: translate(10px,10px);
				 transform: translateX(10px);
				 transform: translateY(10px);
				 transform: rotate(10deg);
				 ransform: scale(2,2);
				 transform: scaleX(2);
				 transform: scaleY(2);
				 transform: skew(5deg,5deg);
				 transform: skewX(10deg);
				 transform: skewY(10deg);
				 * */
				
				/*
				transform-origin:top;
				-webkit-transform-origin: top;
				-moz-transform-origin: top;
				
				transform: rotate(10deg);
				-webkit-transform: rotate(10deg);
				-moz-transform: rotate(10deg);
				*/
				
				transform: skewX(10deg);
				-webkit-transform: skewX(10deg);
				-moz-transform: skewX(10deg);
			}
			
			
			
		</style>
	</head>
	<body>
		<!--
        	作者：offline
        	时间：2015-09-18*-+
        	描述：transform
        		none：无转换
				matrix(<number>,<number>,<number>,<number>,<number>,<number>)：以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵
				translate(<length>[, <length>])：指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
				translateX(<length>)：指定对象X轴（水平方向）的平移
				translateY(<length>)：指定对象Y轴（垂直方向）的平移
				rotate(<angle>)：指定对象的2D rotation（2D旋转），需先有transform-origin属性的定义
				scale(<number>[, <number>])：指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
				scaleX(<number>)：指定对象X轴的（水平方向）缩放
				scaleY(<number>)：指定对象Y轴的（垂直方向）缩放
				skew(<angle> [, <angle>])：指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
				skewX(<angle>)：指定对象X轴的（水平方向）扭曲
				skewY(<angle>)：指定对象Y轴的（垂直方向）扭曲
        -->
        
        <!--
        	作者：offline
        	时间：2015-09-18
        	描述：transform-origin
				<percentage>：用百分比指定坐标值。可以为负值。
				<length>：用长度值指定坐标值。可以为负值。
				left：指定原点的横坐标为left
				center①：指定原点的横坐标为center
				right：指定原点的横坐标为right
				top：指定原点的纵坐标为top
				center②：指定原点的纵坐标为center
				bottom：指定原点的纵坐标为bottom
        -->
        
        <div class="total">
        	<div class="one"></div>
        </div>
	</body>
</html>

2、动态

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.total{
				width: 200px;
				height: 200px;
				border: 2px solid #8FA1FF;
				margin: 50% 50%;
			}
			.one{
				width: 200px;
				height: 200px;
				border: 3px solid #ADFF2F;
				
				transform: rotate(10deg);
				-webkit-transform: rotate(10deg);
				-moz-transform: rotate(10deg);
			}
		</style>
		
		<script>
			window.onload = function(){
				var div = document.getElementsByTagName("div")[1];
				var angle = 0; 
				setInterval(function(){
					angle++;
					setCss3(div,{"transform":"rotate("+angle+"deg)","transform-origin":"top"});
				},60);
			};
			
			/**
			 *@功能 改变样式
			 * @param obj 元素对象
			 * 		  attrObj 样式
			 * @return null
			 * */
			function setCss3(obj,attrObj){
				for (var i in attrObj) {
					var newI = i;
					//indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
					if(newI.indexOf("-")>0){
						var num = newI.indexOf("-");
						//substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
						//replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
						newI.replace(newI.substr(num,2),newI.substr(num+1,1).toUpperCase());
					}
					
					obj.style[newI]=attrObj[i];
					//charAt() 方法可返回指定位置的字符。
					newI.replace(newI.charAt(0),newI.charAt(0).toUpperCase());
					obj.style["webkit"+newI]=attrObj[i];//chrome
					obj.style["moz"+newI]=attrObj[i];//firefox
					obj.style["o"+newI]=attrObj[i];//oprea
					obj.style["ms"+newI]=attrObj[i];//ie
				}
			}
		</script>
	</head>
	<body>
		<div class="total">
        	<div class="one"></div>
        </div>
	</body>
</html>