回転するカラフル文字列

以下が実装例です。JavaScriptのevalは使わず、安全性を確保しています。

```html
<!DOCTYPE html>
<html>
<head>
	<title>回転するカラフル文字列</title>
</head>
<body>
	<h1>回転するカラフル文字列</h1>
	<p>文字を入力してください:</p>
	<input type="text" id="inputText" onkeyup="rotateText()">
	<div id="outputText"></div>
	<script type="text/javascript">
		function rotateText() {
			// 入力された文字を取得
			const inputText = document.getElementById("inputText").value;

			// 文字をカラフルにするためのCSSスタイルを生成
			let styles = "";
			for (let i = 0; i < inputText.length; i++) {
				const hue = i * 30 % 360;
				const color = "hsl(" + hue + ", 100%, 70%)";
				styles += `
#outputText span:nth-child(${i+1}) {
	color: ${color};
}
`;
			}

			// 回転するアニメーションを生成
			const keyframes = `
@keyframes rotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
`;

			// 出力する文字列を生成
			let output = "";
			for (let i = 0; i < inputText.length; i++) {
				output += `<span>${inputText[i]}</span>`;
			}

			// 生成したスタイルとアニメーションを<head>に追加
			const styleElem = document.createElement("style");
			styleElem.type = "text/css";
			styleElem.innerHTML = styles + keyframes;
			document.head.appendChild(styleElem);

			// <div id="outputText">に生成した文字列とスタイルを設定
			const outputElem = document.getElementById("outputText");
			outputElem.innerHTML = output;
			outputElem.style.animation = "rotate 2s linear infinite";

			// 不要なスタイルを<head>から削除
			document.head.removeChild(styleElem);
		}
	</script>
</body>
</html>
```

ジョークとして、回転する文字列がめまいを引き起こす可能性があることを伝えるポップアップを表示するように改良することができます。ただし、セキュリティに関わる問題があるため、実際には行わないようにしてください。