html手机点击播放自动横屏,HTML5 手机横竖屏平滑切换动画

CSS

语言：

CSSSCSS

确定

@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans:400,300,500);

body,

.wrapper {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

}

.phone:before,

.phone:after,

.screen:after {

display: block;

position: absolute;

content: "";

}

* {

margin: 0;

padding: 0;

border: 0;

}

body {

position: relative;

height: 100vh;

background: lightgray;

}

.wrapper {

width: 90vmin;

height: 90vmin;

background: url("https://drscdn.500px.org/photo/84448705/m%3D2048/9a72bfdf723fca8a09c52524f0bef804");

background-size: cover;

border-radius: 50%;

}

.phone {

position: relative;

border: solid white;

border-width: 9vmin 1.44vmin;

box-shadow: 0 0 0 72vmin lightgray;

border-radius: 4.8vmin;

-webkit-transition: -webkit-transform 1s;

transition: transform 1s;

}

.phone:before,

.phone:after {

background: rgba(128, 128, 128, 0.2);

border-radius: 72vmin;

}

.phone:before {

width: 7.2vmin;

height: 7.2vmin;

top: 100.5%;

left: 16.61666vmin;

}

.phone:after {

width: 9vmin;

height: 1.44vmin;

top: -4.5vmin;

left: 16vmin;

}

.show-overlay .phone {

box-shadow: 0 0 0 72vmin rgba(211, 211, 211, 0.75);

}

.right .phone {

-webkit-transform: rotate3d(0, 0, 1, 90deg);

transform: rotate3d(0, 0, 1, 90deg);

}

.bottom .phone {

-webkit-transform: rotate3d(0, 0, 1, 180deg);

transform: rotate3d(0, 0, 1, 180deg);

}

.left .phone {

-webkit-transform: rotate3d(0, 0, 1, -90deg);

transform: rotate3d(0, 0, 1, -90deg);

}

.screen {

position: relative;

width: 40.5vmin;

height: 72vmin;

border-radius: 10px;

}

.screen:after {

top: -2px;

left: -2px;

right: -2px;

bottom: -2px;

border: 5px solid white;

border-radius: 8px;

}

button {

display: inline-block;

font-family: Alegreya Sans, sans-serif;

position: fixed;

top: 10px;

font-size: 16px;

background: white;

border-radius: 200px;

padding: 6px 12px;

cursor: pointer;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

button.rotate {

left: 10px;

}

button.toggle-overlay {

right: 10px;

}

button:hover {

background: black;

color: lightgray;

}

button:active {

opacity: 0.5;

}

button:focus {

outline: 0;

}