学完css基础的朋友们赶紧给自己做个小玩具"奖励"一下自己吧
学习的过程中一定要记得多奖励自己
废话不多说直接撸代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.boss{
width: 200px;
height: 200px;
/* border: 1px solid #000; */
margin: 200px auto;
position: relative;
transform-style: preserve-3d;
transition: 6s linear;
}
.boss:hover{
transform: rotate3d(1,1,1,360deg);
}
.boss div{
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
font-size: 40px;
text-align: center;
line-height: 200px;
font-weight: bold;
color: #fff;
opacity: 0.7;
}
.boss div:nth-child(1){
background: cornflowerblue;
transform: translateX(-100px) rotateY(-90deg);
}
.boss div:nth-child(2){
background: green;
transform: translateX(100px) rotateY(90deg);
}
.boss div:nth-child(3){
background: purple;
transform: translateY(-100px) rotateX(90deg);
}
.boss div:nth-child(4){
background: yellow;
transform: translateY(100px) rotateX(-90deg);
}
.boss div:nth-child(5){
background: skyblue;
transform: translateZ(-100px) rotateY(180deg);
}
.boss div:nth-child(6){
background:red;
transform: translateZ(100px);
}
</style>
</head>
<body>
<div class="boss">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html> 效果图
本文标题:【HTML+CSS】做一个简易的立体小模型
本文链接:https://blog.quwenai.cn/post/9372.html
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。







还没有评论,来说两句吧...