Unicode三角形旋转

我试图让页面加载时以及用户悬停在范围上时，使Unicode三角形（▵）旋转360度。我已经建立了一个jsFiddle解释我想要的。Unicode三角形旋转

<span id="header">ULTR<span id="triangle">&#9653;</span></span>

我不知道有足够的了解CSS3和WebKit的转换，使一些旋转/复位时重新加载页面。

一个示例演示将是Robin Sloan的顶级版本：robinsloan.com它说：“嗨：我是罗宾斯隆，一位作家×媒体发明家，在加州。”在上面。

来源

2012-11-24 Art

的问题是，我不知道够不够CSS3和WebKit 转变，我不知道该怎么做的东西旋/复位重新加载页面时。

那么这就是Google的用途。以下是如何做到这一点上悬停，我敢肯定，你可以找出如何做到这一点在页面加载：

#triangle { 
    display: inline-block; 
    transition: all .5s ease-in-out; 
} 

#header:hover #triangle { 
    transform: rotateZ(360deg); 
}

演示：http://jsfiddle.net/W8zRX/10/

来源

2012-11-24 02:52:33 elclanrs

试试这个，它盘旋时会旋转的三角形量程：

<style type="text/css"> 
#spinner { 
    display:inline-block; 
    transition: transform 2s ease 0s; 
    transform-origin: 52% 58%; 
} 
.spin { 
    transform: rotate(270deg); 
} 
</style> 
<script type="text/javascript"> 
function pageLoad() { 
    var d = document.getElementById('spinner'); 
    d.onmouseover = function() { 
     d.className = 'spin'; 
    } 
    d.onmouseout = function() { 
     d.className = ''; 
    } 
} 
</script> 
</head> 
<body onload="pageLoad();"> 
    <span id="spinner">&#9653;</span> 
</body>

来源

2012-11-24 03:02:36 Cyclonecode

Unicode三角形旋转

回答

相关问题