css3--transform属性

来源：互联网发布：全国网络诈骗报警平台编辑：程序博客网时间：2024/05/17 06:38

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轴。如果第二个参数未提供，则默认值为0translateX(<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轴。如果第二个参数未提供，则默认值为0skewX(<angle>)：指定对象X轴的（水平方向）扭曲skewY(<angle>)：指定对象Y轴的（垂直方向）扭曲        -->                <!--        作者：offline        时间：2015-09-18        描述：transform-origin<percentage>：用百分比指定坐标值。可以为负值。<length>：用长度值指定坐标值。可以为负值。left：指定原点的横坐标为leftcenter①：指定原点的横坐标为centerright：指定原点的横坐标为righttop：指定原点的纵坐标为topcenter②：指定原点的纵坐标为centerbottom：指定原点的纵坐标为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];//chromeobj.style["moz"+newI]=attrObj[i];//firefoxobj.style["o"+newI]=attrObj[i];//opreaobj.style["ms"+newI]=attrObj[i];//ie}}</script></head><body><div class="total">        <div class="one"></div>        </div></body></html>

0 0