Question

我正在创造一种旋转立方体的那种效果，但我不明白为什么在3个方面中的任何一个，文字都不清楚，它显得模糊。我想让文字清晰，你不需要阅读整个代码，只在#cube部分内。

#container {
    width: 500px;
	height: 600px;
	border: 1px solid black;
	position: absolute;
	top: 100px;
	left: 100px;
	perspective: 1500px;
	perspective-origin: 50% 300px;
}
#cube {
	position: absolute;
	top: 60px;
	left: 150px;
	transition: transform 0.5s;
	transform-origin: 100px 50%;
	transform-style: preserve-3d;
}
#cube div {
	position: absolute;
	width: 200px;
	height: 400px;
	background: linear-gradient(60deg, rgba(255, 255, 255, 0.8), rgba(192, 192, 192, 0.8));
	border: 1px solid black;
}
#hobbies {
	transform: rotateY(-60deg) translateZ(173px);
}
#about {
	transform: rotateY(0deg) translateZ(173px);
}
#interests {
	transform: rotateY(60deg) translateZ(173px);
}
input[type=radio] {
	display: none;
}
label {
	background-color: orange;
	padding: 10px;
	position: absolute;
	top: 520px;
	width: 70px;
	text-align: center;
}
label:hover {
	cursor: pointer;
}
label[for=left] {
	left: 100px;
}
label[for=front] {
	left: 200px;
}
label[for=right] {
	left: 300px;
}
#left:checked ~ #cube{
	transform: rotateY(60deg);
}
#front:checked ~ #cube{
	transform: rotateY(0deg);
}
#right:checked ~ #cube{
	transform: rotateY(-60deg);
}

<html>
    <head>
	    <link rel="stylesheet" href="style.css">
	</head>
	<body>
	    <div id="container">
			<input type="radio" name="glass"  id="left"><label for="left">Hobbies</label>
		    <input type="radio" name="glass"  id="front"><label for="front">About Me</label>
		    <input type="radio" name="glass"  id="right"><label for="right">Interests</label>
		    <div id="cube">   
     			<div id="hobbies"><h1 style="color: black;">.....hobbies.....</h1></div>
		        <div id="about">.....about me.....</div>
		        <div id="interests">.....interests.....</div>
		    </div>
		</div>
	</body>
</html>

使用translateZ时文字显得模糊？

0 个答案: