我试图让 unicode 三角形 (▵) 在页面加载和用户悬停在跨度上时旋转 360 度。我已经设置了一个jsFiddle来解释我想要什么。
<span id="header">ULTR<span id="triangle">▵</span></span>
我对 CSS3 和 webkit 转换的了解不够,无法在页面重新加载时进行旋转/重置。
一个示例演示是 Robin Sloan 的x 在顶部:robinsloan.com 上面写着"嗨:我是 Robin Sloan,加利福尼亚的作家×媒体发明家"。
问题是我对CSS3和webkit的了解不够 转换,我不知道如何使某些东西旋转/重置 当页面重新加载时。
好吧,这就是谷歌的目的。这是悬停时的操作方法,我相信您可以找到如何在页面加载时执行此操作:
#triangle {
display: inline-block;
transition: all .5s ease-in-out;
}
#header:hover #triangle {
transform: rotateZ(360deg);
}
演示:http://jsfiddle.net/W8zRX/10/
试试这个,它会在悬停跨度时旋转三角形:
<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">▵</span>
</body>