加入正方形宽高为100px，
ul li:nth-child(1){background-color: red
transform: translate(-100px) rotateY(90deg)
}
ul li:nth-child(2){
background-color: blue
transform: translate(100px) rotateY(90deg)
}
ul li:nth-child(3){
background-color: orange
transform: translateZ(100px)
}
ul li:nth-child(4){
background-color: green
transform: translateZ(-100px)
}
ul li:nth-child(5){
background-color: black
transform: translateY(100px) rotateX(90deg)
}
ul li:nth-child(6){
background-color: chocolate
transform: translateY(-100px) rotateX(90deg)
}
空间想象力要好，最开始所有面都重合在一起，要一个个移到指定位置形成个立方体
我写了个正方体的模板，你可以按照你想要的把每个面旋转不同角度就行了
<style type="text/css">html{
font-size:62.5%
}
img{
width:300px
height:300px
}
#stage{
margin-top:200px
margin-left:auto
margin-right:auto
width:300px
height:300px
perspective:1200px
font-size:5em
font-weight:bold
color:#cc00ff
}
.cube{
position:relative
transform:rotateX(-45deg) rotateY(45deg)
transform-style:preserve-3d
transition: all .6s
}
.side{
color:blue
text-align:center
width:300px
height:300px
line-height:300px
position:absolute
background:#cc66ff
opacity:0.5
border:1px solid rgba(117,4,24,0.5)
}
.front{
transform:translateZ(150px)
}
.back{
transform:rotateY(180deg) translateZ(150px)
}
.left{
transform:rotateY(-90deg) translateZ(150px)
}
.right{
transform:rotateY(90deg) translateZ(150px)
}
.top{
transform:rotateX(90deg) translateZ(150px)
}
.bottom{
transform:rotatex(-90deg) translateZ(150px)
}
#stage:hover .cube{
transform:rotateX(-45deg) rotateY(225deg)
transition:transform .6s
}
</style>
</head>
<body>
<div id="stage">
<div class="cube">
<div class="side front"><img src="6.gif" alt="" /></div>
<div class="side back"><img src="2.jpg" alt="" /></div>
<div class="side left"><img src="3.jpg" alt="" /></div>
<div class="side right"><img src="4.jpg" alt="" /></div>
<div class="side top"><img src="5.jpg" alt="" /></div>
<div class="side bottom"><img src="1.jpg" alt="" /></div>
</div>
</div>
</body>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）