0
点赞
收藏
分享

微信扫一扫

css3 六边形

软件共享软件 2022-03-30 阅读 66
html3dcss



<!DOCTYPE html>


<html>


<head>


<meta charset="UTF-8">


<title></title>


<style type="text/css">


#wrap{width: 250px;height: 250px;position: relative;margin: 30px auto;


transition: all 10s ease-in-out;


transform-style: preserve-3d;


}


#wrap div{width: 250px;height: 250px;background: red;position: absolute;


}


#wrap:hover{transform: rotateX(3000deg) rotateY(2000deg);}




/*右边*/


#wrap div:nth-child(1){


background: red;


transform: rotateY(90deg) translateZ(125px);


}


/*左边*/


#wrap div:nth-child(2){


background: yellow;


transform: rotateY(270deg) translateZ(125px);


}




/*下面*/


#wrap div:nth-child(3){


background: green;


transform: rotateX(270deg) translateZ(125px);


}




/*上面*/


#wrap div:nth-child(4){


background: orchid;


transform: rotateX(90deg) translateZ(125px);


}




/*前面*/


#wrap div:nth-child(5){


background: pink;


transform: translateZ(125px);


}




/*后面*/


#wrap div:nth-child(6){


background: lightcyan;


transform: rotateX(180deg) translateZ(125px);


}


</style>


</head>


<body>


<div id="wrap">


<div>1</div>


<div>2</div>


<div>3</div>


<div>4</div>


<div>5</div>


<div>6</div>


</div>


</body>


</html>


举报

相关推荐

0 条评论