css3 3d立体三角形展示图片,纯css3实现图片三角形排列

最新推荐文章于 2021-11-29 16:19:04 发布

傲世少年

最新推荐文章于 2021-11-29 16:19:04 发布

阅读量194

点赞数

文章标签： css3 3d立体三角形展示图片

body{background:#f1f1fa;

}.container{margin:140px auto 0;font-size:0;max-width:560px;

}.wrap{-webkit-transform:rotate(45deg) translate3d(0, 0, 0);-moz-transform:rotate(45deg) translate3d(0, 0, 0);-ms-transform:rotate(45deg) translate3d(0, 0, 0);-o-transform:rotate(45deg) translate3d(0, 0, 0);transform:rotate(45deg) translate3d(0, 0, 0);display:inline-block;-webkit-transition:-webkit-transform 300ms ease-out;-moz-transition:-moz-transform 300ms ease-out;transition:transform 300ms ease-out;width:100px;

}.wrap:hover{-webkit-transition:-webkit-transform 700ms ease-out;-moz-transition:-moz-transform 700ms ease-out;transition:transform 700ms ease-out;-webkit-transform:rotate(45deg) translate3d(10px, 10px, 0);-moz-transform:rotate(45deg) translate3d(10px, 10px, 0);-ms-transform:rotate(45deg) translate3d(10px, 10px, 0);-o-transform:rotate(45deg) translate3d(10px, 10px, 0);transform:rotate(45deg) translate3d(10px, 10px, 0);

}.wrap:nth-child(even){width:40px;-webkit-transform:rotate(225deg) translate3d(30px, 120px, 0);-moz-transform:rotate(225deg) translate3d(30px, 120px, 0);-ms-transform:rotate(225deg) translate3d(30px, 120px, 0);-o-transform:rotate(225deg) translate3d(30px, 120px, 0);transform:rotate(225deg) translate3d(30px, 120px, 0);

}.wrap:nth-child(even) .crop img{-webkit-transform:skew(-20deg, -20deg) rotate(-225deg);-moz-transform:skew(-20deg, -20deg) rotate(-225deg);-ms-transform:skew(-20deg, -20deg) rotate(-225deg);-o-transform:skew(-20deg, -20deg) rotate(-225deg);transform:skew(-20deg, -20deg) rotate(-225deg);

}.wrap:nth-child(even):hover{-webkit-transform:rotate(225deg) translate3d(40px, 130px, 0);-moz-transform:rotate(225deg) translate3d(40px, 130px, 0);-ms-transform:rotate(225deg) translate3d(40px, 130px, 0);-o-transform:rotate(225deg) translate3d(40px, 130px, 0);transform:rotate(225deg) translate3d(40px, 130px, 0);

}.crop{position:relative;width:160px;height:160px;margin:0;display:block;overflow:hidden;-webkit-transform:skew(20deg, 20deg) translate3d(0, 0, 0);-moz-transform:skew(20deg, 20deg) translate3d(0, 0, 0);-ms-transform:skew(20deg, 20deg) translate3d(0, 0, 0);-o-transform:skew(20deg, 20deg) translate3d(0, 0, 0);transform:skew(20deg, 20deg) translate3d(0, 0, 0);

}.crop img{width:160px;height:160px;position:absolute;left:-50%;margin-top:36px;margin-left:36px;top:-50%;-webkit-transform:skew(-20deg, -20deg) rotate(-45deg);-moz-transform:skew(-20deg, -20deg) rotate(-45deg);-ms-transform:skew(-20deg, -20deg) rotate(-45deg);-o-transform:skew(-20deg, -20deg) rotate(-45deg);transform:skew(-20deg, -20deg) rotate(-45deg);opacity:0.7;-webkit-transition:opacity 300ms ease-in-out;-moz-transition:opacity 300ms ease-in-out;transition:opacity 300ms ease-in-out;

}.crop img:hover{opacity:1;

}