1. 程式人生 > >如何通過js獲取到CSS3裡面transform rotate旋轉角度的度數,matrix解析

如何通過js獲取到CSS3裡面transform rotate旋轉角度的度數,matrix解析

如果你曾想通過下面這條語獲取transform的值

$(objName).css('transform');

很遺憾,獲取到的是如下一個矩陣
matrix(a,b,c,d,e,f)

哈哈,看到這個矩陣,很多人都懵了,但是真想獲取rotate的角度怎麼辦,以下是我總結的一些函式:
/*
    * 解析matrix矩陣,0°-360°,返回旋轉角度
    * 當a=b||-a=b,0<=deg<=180
    * 當-a+b=180,180<=deg<=270
    * 當a+b=180,270<=deg<=360
    *
    * 當0<=deg<=180,deg=d;
    * 當180<deg<=270,deg=180+c;
    * 當270<deg<=360,deg=360-(c||d);
    * */
    function getmatrix(a,b,c,d,e,f){
        var aa=Math.round(180*Math.asin(a)/ Math.PI);
        var bb=Math.round(180*Math.acos(b)/ Math.PI);
        var cc=Math.round(180*Math.asin(c)/ Math.PI);
        var dd=Math.round(180*Math.acos(d)/ Math.PI);
        var deg=0;
        if(aa==bb||-aa==bb){
            deg=dd;
        }else if(-aa+bb==180){
            deg=180+cc;
        }else if(aa+bb==180){
            deg=360-cc||360-dd;
        }
        return deg>=360?0:deg;
        //return (aa+','+bb+','+cc+','+dd);
    }

//旋轉
       var obj=$('#id');
        obj.click(function(){
            var deg=eval('get'+obj.css('transform'));//構造getmatrix函式,返回上次旋轉度數
            var step=45;//每次旋轉多少度
            obj.css({'transform':'rotate('+(deg+step)%360+'deg)'});
        });

這樣就ok了,如果你問為什麼我要那麼寫,你可以自己深入研究一下transform的matrix或者下次我抽時間再繼續講解matrix,繼續把成果分享給大家;

相關推薦

如何通過js獲取CSS3裡面transform rotate旋轉角度度數matrix解析

如果你曾想通過下面這條語獲取transform的值 $(objName).css('transform'); 很遺憾,獲取到的是如下一個矩陣 matrix(a,b,c,d,e,f) 哈哈,看到這個矩陣

CSS3屬性transform旋轉:rotate,縮放:scale,傾斜:skew,移動:translate)

在CSS3中,可以利用transform功能來實現文字或影象的旋轉、縮放、傾斜、移動這四種類型的變形處理。 注意:都是以中心點為原點進行移動旋轉縮放傾斜的。 skew的預設原點是transform-origin是這個物件的中心點。 transform-origin:設定元素原點位置;

通過js獲取class類名的函數封裝

clas ret -1 .class class urn getclass ++ 不同 通過className獲取元素,不同的瀏覽器會有不同的支持情況,所以為了兼容各個瀏覽器在這裏,我寫了幾個函數獲取className的值 function byclass(classn){

【轉】通過js獲取系統版本以及瀏覽器版本

返回 ati event 一個數 alt eve qq瀏覽器 搜狗瀏覽器 rms 1 function getOsInfo() { 2 var userAgent = navigator.userAgent.toLowerCase(); 3

通過js獲取css屬性

1、通過dom.style.屬性    來獲取 但是這種方法無法獲取id、class裡的屬性 例子: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &

通過js獲取td標籤的text、html、innerhtml三者的區別

注意innerhtml是原生的js的用法。 text、html是jQuery的用法,原生的js語法是沒有text、html這種用法的。 原生的innerhtml = jQuery的html() html()獲取的是id=?的標籤如<td id="test"><a>

js獲取字串裡面字面最多的字母

var str = "abcdefgssdd"; var obj = {}; var letter; for(var i = 0,len = str.length;i<len;i++){//遍歷所有的str letter = str[i]; if(!ob

通過JS獲取前臺資料並向後臺一般處理程式傳遞

function AddTeachCourse() { //取得教師ID var strTeacherID = $("#hidFieldSaveTeacherID").val(); //alert("教師ID="+txtTeacherID); //取得課程ID var s

小胖說事36----iOS通過js 獲取webview中的html內容

1)設定UIWebView delegate 2)在  - (void)webViewDidFinishLoad:(UIWebView *)webView { }中 執行如下程式碼 :       NSString *jsToGetHTMLSource =

通過js獲取 jsp 中的值

<a>  a標籤內容如下 <a class="btn btn-info btn-sm" href="javascript:void(0)" data-edits="${adStati

jsp頁面載入時文字框通過js獲取焦點

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <

通過JS獲取真實的外網IP和內網IP以及IPv6地址

由於需求需要獲取到本機ip地址,查了半天相關只是不知所云,最後偶然得已法,遂試,果然ok,直接看下文。 通過JS獲取你真實的外網IP和內網IP以及IPv6地址,就算開代理也沒有用,想想真是太6,還能不能愉快的裝逼了,效果如下:

通過js獲取到螢幕高度藉助螢幕高度設定div的高度

<div id="test" style=" border: solid 1px #f00; "></div>     <script type="text/javascript">    autoDivSize();    functio

mui 通過js獲取單選框的值

<html> <head> <script type ="text/javascript"> function change() { varNew

h5通過js 獲取上一級頁面中的引數問題

1.上一級頁面跳轉 :   window.location.href= encodeURI("product1-show.html?name=znyj");(1).product1-show.html 頁面,(2).name=znyj 拼接引數。2.下級頁面js 接收。   

js獲取url地址中的每一個引數方便操作url的hash

js獲取url地址中的每一個引數,方便操作url的hash 值得收藏 <html> <body> <script> //location.search; //可獲取瀏覽器當前訪問的url中"?"符後的字串

SpringBoot專案攔截器中通過獲取Request請求物件中的引數後控制器中@RequestBody註解引數獲取不到

一、場景     第一次搭建專案開發環境,需要在專案中實現日誌攔截器,用來獲取使用者請求引數日誌,以便在後期維護中出現BUG時能夠快速定位錯誤發生的場景。請求引數一般通過GET和POST方式進行傳遞,GET請求引數獲取通過request.getParameterMap()獲

C#通過反射獲取類中的方法和引數個數反射呼叫方法帶引數

using System; using System.Reflection; namespace ConsoleApp2 { class Program { static void Main(string[] args)

rotate()旋轉角度/順逆時針問題

理論上都應是讓各軸的正向(X軸向右、Y軸向下、Z軸面向自己)指向自己,順時針(正角度值)/逆時針(負角度值)轉; 但rotate()、rotateZ(),會採用就近轉到目標角度原則:  小於180°,正常順時針,但大於180°就要注意:例設值200deg,會逆時針轉160

js 獲取a標籤被點選的連結有多個a標籤

新增onclick事件,獲取href屬性就知道具體的url地址了 <!DOCTYPE html> <html> <body> <script> function aclick(self){ alert(self.hre