CSS 3新特性学习----2D转换

最新推荐文章于 2022-06-19 20:37:38 发布

自由之翼Online

最新推荐文章于 2022-06-19 20:37:38 发布

阅读量564

点赞数

分类专栏： css3 文章标签： CSS3 2d

本文链接：https://blog.csdn.net/awpzxtty/article/details/22266119

版权

css3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS 3能够对元素进行移动，缩放，转动拉长或者拉伸，通过这些手段我们就可以实现2D转换的效果。

IE 10,FireFox以及Opera支持transform属性，Chrome和Safari需要加上前缀-webkit-,IE 9则有些特别，需要加上前缀-ms-。

<style>
   .out {
        width:200px;
		height:200px;
        border:1px solid red;
   }
   .inner {
        width:200px;
		height:200px;
        border:1px solid blue;
		/*平移效果
		transform:translate(10px,10px);
                -webkit-transform:translate(10px,10px);
                -ms-transform:translate(10px,10px);

               */
		/*缩放效果
		transform:scale(0.5,0.5);  
		指定参照点进行缩放,也可以用百分比或者关键字来指定缩放参考点
		-webkit-transform-origin:0 0;
		-webkit-transform:scale(0.5,0.5);
        */
		/*
		-webkit-transform-origin:0 0;
		角度
		-webkit-transform:rotate(10deg);
		弧度
		-webkit-transform:rotate(0.1rad);
        */
		/*斜切
		-webkit-transform:skew(10deg,10deg);
        -webkit-transform:skewX(10deg);
		*/
	
   }
</style>
<div class="out">
   <div class="inner">
   </div>
</div>

下面是一个实现一个区块进行2D转换的例子:

<!doctype>
<html lang="zh-hans">
<head>
     <meta charset="utf-8">
    <style>
       .d1 {
           width:200px;height:200px;border:1px solid red; 
       }
    </style>
</head>
<body>
      <div class="d1"></div>
      <script>
          window.onload = function(){
		     var div = document.getElementsByTagName("div")[0];
			 var angle = 0;
			 setInterval(function(){
			     angle++;
				 makeDivRevolve(div,{transform:"rotate("+angle+"deg)","transform-origin":"50% 50%"});
			 },60);
		  };

		  function makeDivRevolve(docElement,attrObject){
		     for(var attr in attrObject){
			      var newAttr = attr;
				   if(newAttr.indexOf("-")>0){
					   var num=newAttr.indexOf("-");
					   newAttr=newAttr.replace(newAttr.substr(num,2),newAttr.substr(num+1,1).toUpperCase());
				   }
				   docElement.style[newAttr]=attrObject[attr];
	               newAttr=newAttr.replace(newAttr.charAt(0),newAttr.charAt(0).toUpperCase());
                   docElement.style["webkit"+newAttr]=attrObject[attr];
	               docElement.style["moz"+newAttr]=attrObject[attr];
	               docElement.style["o"+newAttr]=attrObject[attr];
	               docElement.style["ms"+newAttr]=attrObject[attr];
			 }
		  }
      </script>
</body>
</html>

自由之翼Online

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 3新特性学习----2D转换

CSS 3能够对元素进行移动，缩放，转动拉长或者拉伸，通过这些手段我们就可以实现2D转换的效果。 IE 10,FireFox以及Opera支持transform属性，Chrome和Safari需要加上前缀-webkit-,IE 9则有些特别，需要加上前缀-ms-。 .out { width:200px; height:200px; bord
复制链接

扫一扫

专栏目录