css3动画之两面翻转的盒子

发布时间:2021-01-12 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了css3动画之两面翻转的盒子前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

利用伪元素before、after,只创建一个div

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

/*先清掉默认的样式*/

body {

margin: 0;

padding: 0;

background-color: bisque;

}

/*给创建的div设置宽高和加上3D效果,且加上定位,方便后期的动画操作*/

.box {

width: 300px;

height: 300px;

margin: 100px auto;

position: relative;

transform-style: preserve-3d;

transition: all 5s;

}

/*给伪元素before和after设置宽高,以及定位,

*此处用上下左右都为0的方法,使得before和after两个盒子紧贴父元素,达到这两个盒子与父盒子同款同高

*也可以采用width=100% height=100%的方法

*/

.box::before,.box::after {

content: '';

display: block;

position: absolute;

left: 0;

right: 0;

bottom: 0;

top: 0;

}

.box::before {

background: url("images/bg.png") right bottom;/*这里是设置背景图*/

transform: translateZ(0px);/*利用伪元素的话,这里就必须要加上,但是根据浏览器的不同,这里给的值也就不同*/

}

.box::after {

background: url("images/bg.png") left bottom;

transform: translateZ(0px);/*利用伪元素的话,这里就必须要加上,但是根据浏览器的不同,这里给的值也就不同*/

}

.box:hover {

transform: rotateY(180deg);

}

</style>

</head>

<body>

<div class="box"></div>

</body>

</html>

进一步优化——不采用伪元素

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

body {

margin: 0;

padding: 0;

background-color: salmon;

}

div {

width: 224px;

height: 224px;

position: relative;

}

img {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

transition: all 1s;

}

img:last-child {

backface-visibility: hidden;

}

div:hover img {

transform: rotateY(180deg);

}

</style>

</head>

<body>

<div>

<img src="images/hou.svg" alt="">

<img src="images/qian.svg" alt="">

</div>

</body>

</html>

一个盒子里面装两个同宽高的盒子,利用backface-visibility设置元素背面是否可见的属性,达到两面翻转的效果

总结


以上是前端之家为你收集整理的css3动画之两面翻转的盒子全部内容,希望文章能够帮你解决css3动画之两面翻转的盒子所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。