大家可以帮我看一看代码上有什么问题嘛,为什么对图片不能实行控制无法翻转,并且大小也不能调节。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>翻转</title>
<style>
.card{width:200px;height=380px;position:relative;float=left; margin:0 10px;}
.card .font,.card .back{position: absolute;left:0;top:0;transtion:transform 0.4s;
backface-visibility: hidden;
}
.card.font{tansform: rotateY( 0deg);}
.card.back{tansform: rotateY( 180deg);}
.card:hover .font:{transform: rotateY( 180deg);}
.card:hover .back:{transform: rotateY( 0deg);}
</style>
</head>
<body>
<div class="card">
<a href="#" class="font"><img src="轨迹素材_05.png"></a>
<a href="#" class="back"><img src="轨迹素材_06.png"></a>
</div>
<div class="card">
<a href="#" class="font"><img src="轨迹素材_05.png" alt=""/></a>
<a href="#" class="back"><img src="轨迹素材_06.png" alt=""/></a>
</div>
<div class="card">
<a href="#" class="font"><img src="轨迹素材_05.png" alt=""></a>
<a href="#" class="back"><img src="轨迹素材_06.png" alt=""></a>
</div>
<div class="card">
<a href="#" class="font"><img src="轨迹素材_05.png" alt=""></a>
<a href="#" class="back"><img src="轨迹素材_06.png" alt=""></a>
</div>
</body>
</html>