HTML5 90度旋转倾斜卡片队列页面布局

使用css3 transform:rotate小技巧制作不拘一格的布局。

html5, template

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 4213
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url('https://fonts.googleapis.com/css?family=Amiri|Aref+Ruqaa|Cairo|Changa|El+Messiri|Harmattan|Jomhuria|Lateef|Mirza|Rakkas|Lato|Source+Sans+Pro|Ubuntu');
/* *{transition: 0.3s linear; padding:0;margin:0;} */

body {
    background-image: linear-gradient(-225deg, rgba(44, 216, 213, 0.45) 0%, #C5C1FF 56%, rgba(255, 186, 195, 0.71) 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}
h2 {
    margin: 2em;
    letter-spacing: 0.2em;
    color: #EEE
}
.container {
    margin: 3em auto;
    width: 90%;
    text-align: center;
    /* 	font-family: 'Aref Ruqaa', serif; */
    
    font-family: 'Ubuntu', sans-serif;
    /* font-family: 'Lato', sans-serif; */
    
    font-family: 'Source Sans Pro', sans-serif;
}
.item {
    /* 	background: #FFF; */
    
    margin: 2em;
    display: inline-block;
    width: 200px;
    height: 200px;
    border-radius: 20px;
    transform: rotate(45deg);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    margin: 0 auto;
}
.item p {
    position: absolute;
    transform: rotate(-45deg);
    top: 30%;
    left: -20%;
    background: rgba(0, 0, 0, 0.7);
    padding: 10px 20px;
    width: 130%;
    text-align: center;
    color: #fff;
    transition: all 0.3s ease-in-out;
}
.item:hover {
    transform: none;
    transform: scale(1.5);
    z-index: 2;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.item:hover > p {
    transform: none;
    top: 0;
}
img {
    width: 100%;
    height: 100%;
    transition: 0.3s linear;
    transform: rotate(-45deg) scale(1.4)
}
.item:hover > img {
    transform: none;
}
p.ar {
    font-family: 'Rakkas', cursive;
    font-size: 1.1em;
}
body::-webkit-scrollbar {
    width: 0.7em;
    background-color: #EEE;
}
body::-webkit-scrollbar-thumb {
    /* 	background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%); */
    
    background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
    /* 	background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%); */
    /*   background: linear-gradient(to top, #2193b0, #6dd5ed);  */
    
    border-radius: 1em;
}

HTML

使用css3 transform:rotate小技巧制作不拘一格的布局。

html5, template

编辑器支持Emmet

快捷键

使用css3 transform:rotate小技巧制作不拘一格的布局。

html5, template

HTML5 CSS3 SVG团队成员介绍卡片页面模板

HTML5 + GSAP + Founation.css构建响应式博客文章列表页面布局模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：