CSS动画翻转的效果

想要实现一个翻转的动画效果，那么我们就要掌握css3动画里面的知识点，下面我来给大家讲解一下。
布局如下：

<div class="box">
		<ul>
			<li class="card">
				<div class="card-on card-on2">
					<img src="img/fanmian.jpg" alt="">
				</div>
				<div class="card-in card-on card-in2">
					<img src="img/zhengmian.jpg" alt="">
				</div>
			</li>
			<li class="card">
				<div class="card-on card-on2">
					<img src="img/fanmian.jpg" alt="">
				</div>
				<div class="card-in card-on card-in2">
					<img src="img/zhengmian.jpg" alt="">
				</div>
			</li>
		</ul>
	</div>

给每个li一个左浮动；
在给“card”这个类设置一个position：relative（相对定位）；
给“card-on ”这个类设置一个动画过渡效果transition: all 0.8s ease。以及position：absolute（绝对定位）；
翻转时背面的元素就要隐藏起来我们就给他来一个属性backface-visibility:hidden;他的默认值是visible（可见的）。最后在设置一个阴影的效果，增加立体感。

.card-on{
    
    
			transition: all 0.8s ease;
			position: absolute;
			top: 0px;
			left: 0px;
			height: 366px;
			width: 238px;
			backface-visibility:hidden;
			border-radius: 10px;
			overflow: hidden;
            box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
		}

这里普及一下 transition他是一个复合属性；他有几个子属性分别是：
（1） transition-property：指定过渡或动态模拟的 CSS 属性；
（2） transition-duration：指定过渡完成所需的时间；
（3） transition-timing-function：指定过渡函数；
（4） transition-delay：指定开始出现的延迟时间；

给“card-in”这个类添加一个transform 属性，属性值为rotateY(180deg)意思是在y轴上顺时针旋转180°；
给“card”添加一个伪类鼠标放上去“card-on2”逆时针旋转180°；
最后再给“card”添加一个伪类鼠标放上去“card-in”旋转0°；见实现代码。

.card-in{
    
    
            transform: rotateY(180deg);
		}
		.card:hover .card-on2{
    
    
           transform: rotateY(-180deg);
		}	
		.card:hover .card-in{
    
    
             transform: rotateY(0deg);
		}

CSS动画翻转的效果

猜你喜欢