<!DOCTYPE?html>
<html>
????<head>
????????<meta?charset="UTF-8">
????????<title>css旋轉(zhuǎn)動畫</title>
????????<style>
????????????.rotateRect{
????????????????position:?absolute;
????????????????left:?300px;
????????????????top:?300px;
????????????????animation:?rotone?2s?linear?infinite;
????????????????transform-origin:?150px?150px;
????????????}
????????????.rotateRect?em{
????????????????display:?block;
????????????????width:?50px;
????????????????height:?50px;
????????????????background-color:?#FF8C00;
????????????????animation:?rottwo?2s?linear?infinite;????
????????????}
????????????@keyframes?rotone{
????????????????from{transform:?rotate(0);}
????????????????to{transform:?rotate(360deg);}
????????????}
????????????@keyframes?rottwo{
????????????????from{transform:?rotate(360deg);}
????????????????to{transform:?rotate(0);}
????????????}
????????</style>
????</head>
????<body>
????????<div?class="rotateRect"><em></em></div>
????</body>
</html>感覺背景色晃動是什么問題？還有這個嵌套一個em，一個正著轉(zhuǎn)，一個反轉(zhuǎn)，然后就不轉(zhuǎn)了，什么原因哦？很有意思的東西要是能有人把transform-origin屬性給我說明白就好了
1 回答
翰術(shù)
TA貢獻21條經(jīng)驗 獲得超8個贊
旋轉(zhuǎn)需要繞軸轉(zhuǎn)，transform-origin，可以設(shè)置那根軸的位置。
對2D來說，只有X和Y (平面) 只能設(shè)置X軸和Y軸
對3D來說，還能繞Z軸轉(zhuǎn)
添加回答
舉報
0/150
提交
取消