html如何将页面旋转90度,HTML5 90度旋转倾斜卡片队列页面布局

CSS

语言：

CSSSCSS

确定

@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;

}