javascript如何实现图片任意角度的旋转？

JavaScript014

javascript如何实现图片任意角度的旋转？,第1张

可以用JAvascript改变这个图片的css来旋转他：

这个是css代码：

img {

transform:rotate(7deg)

-ms-transform:rotate(7deg) /* IE 9 */

-moz-transform:rotate(7deg) /* Firefox */

-webkit-transform:rotate(7deg)/* Safari 和 Chrome */

-o-transform:rotate(7deg) /* Opera */

}

在JAvascript里面可以先获取到这张图片 设置图片id = "box"

var img = document.getElementById('box') 获取到这个图片并用变量记住

img.style.transform = "rotate(90deg)" 改变这个图片的css，旋转90度

完毕！！！

代码应该是：

imgcss[i].style.transform="rotate(" + j + ")"

首先 j是变量 双引号里面套单引号 还是字符串， 不是变量

其次 字符串拼接要写加号

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>

        div{

            border: solid red 1px

        }

        #mdiv{

            width: 171px

            height: 134px

            line-height: 134px

            background: url("6.jpg") no-repeat

            text-align: center

        }

        #mspan{

            display: none

        }

    </style>

</head>

<body>

<div id="mdiv"><span id="mspan">内容</span></div>

<script src="jquery-2.1.1.min.js"></script>

<script>

    var div = $('#mdiv')

    var isFirst = true

    div.click(function(){

        if(isFirst){

            isFirst = false

            div.css({"transformStyle":"preserve-3d","-webkitTransform":"rotateY(90deg)", "-webkitTransition":"all 0.6s"})

            setTimeout(function(){

                $('#mspan').show()

                $('#mspan').css({'transform':'rotateY(180deg)','display':'block'})

                div.css('background','none')

            },700)

            setTimeout(function(){

                div.css({"transformStyle":"preserve-3d","-webkitTransform":"rotateY(180deg)", "-webkitTransition":"all 0.6s"})

            },800)

        }

    })

</script>

</body>

</html>