html时钟翻牌效果,HTML+CSS 制作翻牌效果[练习]

案例来源

本例来自CodingStartup的视频：HTML+CSS 制作翻牌效果

学到知识

使用backface-visibility:hidden属性，可以在翻转元素的时候隐藏背面，否则显示镜像的背面(注意兼容问题)。

可以使用position:absolute属性，重叠两个元素

使用perspective 设定立体的透视深度，此属性有两种设置方法:

设置在执行动作的元素transform属性内：transform: perspective(1000px) rotateY(180deg)

(本例)设置在执行动作的元素的父元素，使用perspective: 1000px

在使用:hover伪类时，要尽量作用在执行动作的元素的父类，以免因为改变形状而影响效果的稳定。

主要代码

html

COVER

BACK

COVER

BACK

COVER

BACK

css

html {

font-size: 22px;

}

body {

width: 100vw;

height: 100vh;

display: flex;

justify-content: space-evenly;

align-items: center;

background-image: linear-gradient( 90.5deg, rgba(255,207,139,0.50) 1.1%, rgba(255,207,139,1) 81.3% );

}

.container {

width: 300px;

height: 400px;

position: relative;

perspective: 1000px;

}

.cover, .back{

width: 100%;

height: 100%;

position: absolute;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

transition: transform .25s ease-in-out;

display: flex;

justify-content: center;

align-items: center;

color: #fff;

font-size: 1.6rem;

text-shadow: .1rem .2rem .1rem rgba(0,0,0,.2);

border-radius: .4rem;

box-shadow: .2rem .3rem .4rem rgba(0,0,0,.1);

}

.cover {

transform: rotateY(0deg);

background-image: radial-gradient( circle 465px at -15.1% -25%, rgba(17,130,193,1) 0%, rgba(67,166,238,1) 49%, rgba(126,203,244,1) 90.2% );

}

.container:hover .cover {

transform: rotateY(180deg);

}

.back {

transform: rotateY(-180deg);

background-image: radial-gradient( circle 1294px at -15.5% 23.8%, rgba(255,206,149,1) 0%, rgba(247,92,92,1) 44.9%, rgba(108,0,96,0.97) 93.8% );

}

.container:hover .back{

transform: rotateY(0deg);

}