css动画之旋转翻牌效果
2024-10-07 02:00:45
1、我们先设置两个盒子大小,颜色等等,然后定位重叠在一起,最后再进行动画设置
例子如下:
<style>
.box {
height: 300px;
width: 300px;
position: relative;
} .zh,
.fan {
height: 300px;
width: 300px;
line-height: 300px;
font-size: 30px;
text-align: center;
color: blue;
transition: all 2s;
backface-visibility: hidden;
/* 背面不可见 */
position: absolute;
top:;
left:;
} .zh {
background-color: aqua;
} .fan {
background-color: aquamarine;
transform: rotateY(-180deg) rotateZ(-180deg);
} .box:hover .zh {
transform: rotateY(180deg) rotateZ(180deg)
} .box:hover .fan {
transform: rotateY(0) rotateZ(0);
}
</style>
</head> <body>
<div class="box">
<div class="zh">正面</div>
<div class="fan">反面</div> </div>
</body>
2、效果如下:
---恢复内容结束---
最新文章
- BSS段 data段 text段 堆heap 和 栈stack
- 【转载】阎焱:90后创业是扯淡 大量O2O和P2P公司濒临倒闭
- python杂记-1(os模块)
- easyui datagrid单击单元格选择此列
- HTML5 WebAudioAPI-实例(二)
- Python之random
- SQL*Plus工具使用 sqlplus / as sysdba登录
- js 个人笔记
- DetNet: A Backbone network for Object Detection 笔记
- Vm install centos7
- RabbitMQ:基本命令
- HTML结构组成
- 利用JS验证查询参数-选择月份后必须选择年份
- C#委托、事件剖析(下)
- ES6的新特性(22)——Reflect
- sklearn逻辑回归(Logistic Regression)类库总结
- SPOJ AMR11E Distinct Primes 基础数论
- dom4j解析xml配置文件
- 某地理位置模拟APP从壳流程分析到破解
- 怎么查看linux系统是32位还是64位