<一>实现一个立体六边形
结果示例图:
示例代码:
.test{
font-size:20px;
}
.container{
width: 500px;
height: 420px;
position: relative;
margin: 0 auto;
padding-top: 200px;
perspective: 3000px; /*perspective属性定义3D元素距视距的距离,以像素计*/
-webkit-perspective-origin-y: 330px;/*设置3D元素的基点位置*/
}
.carousel{
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;/*子元素保留其3D位置*/
transform: translateZ(-400px) rotateY(0deg);
}
.carousel div{
width:350px;
height:250px;
background-color: rgba(138,224,232,0.5);
display: block;
position: absolute;
left: 50%;
margin-left: -150px;
}
.rotate-0{
transform: rotateY(0deg) translateZ(400px);/* rotate定义旋转,rotateY定义沿Y轴旋转角度;translate定义转换,translateZ定义沿Z轴方向的转换 */
}
.rotate-1{
transform: rotateY(60deg) translateZ(400px);
}
.rotate-2{
transform: rotateY(120deg) translate