CSS3图片或者DIV等旋转90度180度

admin 发布时间：2015-06-02 分类：Web 阅读：18008次 8 条评论

CSS3特性图片或者DIV旋转90度180度，经常可看到博客评论系统里面评论者头像旋转180度的效果。可以将下面代码保存为html文档运行。运行的图片效果（实际效果请将下面代码保存为html文件并且引入jQuery文件）:

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
    width:100px;
    height:75px;
    background-color:yellow;
    border:1px solid black;
}
.rptare
{
    transform:rotate(90deg);
    -ms-transform:rotate(90deg); /* IE 9 */
    -moz-transform:rotate(90deg); /* Firefox */
    -webkit-transform:rotate(90deg); /* Safari and Chrome */
    -o-transform:rotate(90deg); /* Opera */
}
.animated_div
{
    width:60px;
    height:40px;
    color:#ffffff;
    position:relative;
    font-weight:bold;
    padding:20px 10px 0px 10px;
    float:left;
    margin:20px;
    margin-right:50px;
    border:1px solid #888888;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    font:12px Verdana, Arial, Helvetica, sans-serif;
    text-align:center;
    vertical-align:middle;
    background:red;
}
</style>
<script>
var x,y,n=0,ny=0,rotINT,rotYINT
function rotateDIV()
{
    x=document.getElementById("rotate1")
    clearInterval(rotINT)
    rotINT=setInterval("startRotate()",10)
}
function rotateYDIV()
{
    y=document.getElementById("rotatey1")
    clearInterval(rotYINT)
    rotYINT=setInterval("startYRotate()",10)
}
function startRotate()
{
    n=n+1
    x.style.transform="rotate(" + n + "deg)"
    x.style.webkitTransform="rotate(" + n + "deg)"
    x.style.OTransform="rotate(" + n + "deg)"
    x.style.MozTransform="rotate(" + n + "deg)"
    if (n==180 || n==360)
    {
        clearInterval(rotINT)
        if (n==360){n=0}
    }
}
function startYRotate()
{
    ny=ny+1
    y.style.transform="rotateY(" + ny + "deg)"
    y.style.webkitTransform="rotateY(" + ny + "deg)"
    y.style.OTransform="rotateY(" + ny + "deg)"
    y.style.MozTransform="rotateY(" + ny + "deg)"
    if (ny==180 || ny>=360)
    {
        clearInterval(rotYINT)
        if (ny>=360){ny=0}
    }
}
</script>
</head>
<body>
<div id="panel" onclick="$('#panel').addClass('rptare');">直接旋转90度无过渡</div>
<p onclick="rotateDIV()" id="rotate1" class="animated_div" style="transform: rotate(180deg); -webkit-transform: rotate(180deg);">旋转180度有过渡</p>
</body>
</html>

备注：IE10以上及Chrome、Firefox等现代浏览器支持，IE10以下不支持。

更简单的写法，代码如下：

<!DOCTYPE html>
<html>
<head>
<style> 
    div
    {
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    border-radius:30px;
    width:100px;
    height:100px;
    background:blue;
    transition:1s;
    -moz-transition:1s; /* Firefox 4 */
    -webkit-transition: 1s; /* Safari and Chrome */
    -o-transition:1s; /* Opera */
    }
    div:hover
    {
    transform:rotate(360deg);
    }
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针移动到蓝色的 div 元素上</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>

关键字词： CSS3 头像旋转

上一篇：jQuery元素的Position左右移动实现动画移动

下一篇：关于UC手机浏览器img标签不显示