设计蓝色盒子(盒子内文本为“Web前端开发基础课程”)围绕y轴逆时针旋转180度,,过渡效果自定义,完整代码
时间: 2024-03-01 14:52:45 浏览: 66
以下是使用CSS3实现的蓝色盒子围绕y轴逆时针旋转180度,并且添加了自定义的过渡效果的完整代码:
<!DOCTYPE html>
<html>
<head>
<title>蓝色盒子旋转效果</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: blue;
color: #fff;
font-size: 20px;
text-align: center;
line-height: 100px;
transform: perspective(800px) rotateY(0deg);
transition: transform 1s ease-in-out;
}
.box:hover {
transform: perspective(800px) rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
Web前端开发基础课程
</div>
</body>
</html>
在上面的代码中,我们定义了一个名为“box”的div元素,并为其设置了宽度、高度、背景颜色、字体颜色、字体大小、文本对齐方式和行高等样式。同时,我们使用了CSS3的transform属性和transition属性来实现旋转效果和过渡效果。
具体来说,我们首先将盒子沿着y轴旋转了0度,然后定义了一个名为“box:hover”的伪类,当鼠标悬浮在盒子上时,将盒子沿着y轴旋转了180度。同时,我们还使用了perspective属性来定义了一个透视距离,使得旋转效果更加真实。
总的来说,以上代码可以实现一个简单的蓝色盒子围绕y轴逆时针旋转180度的效果,并且添加了自定义的过渡效果。
阅读全文
相关推荐
















