当前位置:网站首页>Flop effect
Flop effect
2022-04-23 14:16:00 【Ruirui junior】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* div{
position: relative;
margin: 100px auto;
width: 224px;
height: 224px;
}
div img{
position: absolute;
left: 0;
top: 0;
transition: all 2s;
}
div img:first-child{
z-index: 1;
backface-visibility: hidden;
}
div:hover img{
transform: rotateY(180deg);
} */
/* Classes that will show or hide the
three back faces of the "cube" */
.showbf div {
backface-visibility: visible;
}
.hidebf div {
backface-visibility: hidden;
}
/* Define the container div, the cube div, and a generic face */
.container {
width: 150px;
height: 150px;
margin: 75px 0 0 75px;
border: none;
}
.cube {
width: 100%;
height: 100%;
perspective: 550px;
perspective-origin: 150% 150%;
transform-style: preserve-3d;
}
.face {
display: block;
position: absolute;
width: 100px;
height: 100px;
border: none;
line-height: 100px;
font-family: sans-serif;
font-size: 60px;
color: white;
text-align: center;
}
/* Define each face based on direction */
.front {
background: rgba(0, 0, 0, 0.3);
transform: translateZ(50px);
}
.back {
background: rgba(0, 255, 0, 1);
color: black;
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgba(196, 0, 0, 0.7);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgba(0, 0, 196, 0.7);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgba(196, 196, 0, 0.7);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgba(196, 0, 196, 0.7);
transform: rotateX(-90deg) translateZ(50px);
}
/* Make the table a little nicer */
th, p, td {
background-color: #EEEEEE;
margin: 0px;
padding: 6px;
font-family: sans-serif;
text-align: left;
}
</style>
</head>
<body>
<!-- <div>
<img class="a" src="img/35.jpg" alt="">
<img class="b" src="img/36.jpg" alt="">
</div> -->
<table>
<tr>
<th><code>backface-visibility: visible;</code></th>
<th><code>backface-visibility: hidden;</code></th>
</tr>
<tr>
<td>
<div class="container">
<div class="cube showbf">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
<p>
Since all faces are partially transparent,
the back faces (2, 4, 5) are visible
through the front faces (1, 3, 6).
</p>
</td>
<td>
<div class="container">
<div class="cube hidebf">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
<p>
The three back faces (2, 4, 5) are
hidden.
</p>
</td>
</tr>
</table>
</body>
</html>
版权声明
本文为[Ruirui junior]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/04/202204231408339301.html
边栏推荐
- RecyclerView高级使用(二)-垂直拖拽排序的简单实现
- 利用json-server在本地创建服务器请求
- 返回数组排序后下标
- win10自带Groove音乐不能播放CUE和APE文件的一种曲线救国办法,自己创建aimppack插件包,AIMP安装DSP插件
- 微信小程序客服接入,实现发送和接收消息
- redis数据库讲解二(redis高可用、持久化、性能管理)
- 关于NodeJS中JSON5的相关配置和使用
- HyperMotion云迁移助力中国联通,青云完成某央企上云项目,加速该集团核心业务系统上云进程
- 百度笔试2022.4.12+编程题目:简单整数问题
- HyperBDR云容灾V3.2.1版本发布|支持更多云平台,新增监控告警功能
猜你喜欢
使用开源调研工具Prophet是一种什么体验?
HyperMotion云迁移助力中国联通,青云完成某央企上云项目,加速该集团核心业务系统上云进程
HyperBDR云容灾V3.3.0版本发布|容灾功能升级,资源组管理功能优化
MySQL数据库讲解(八)
Thread group ThreadGroup uses introduction + custom thread factory class to implement threadfactory interface
在MAC上安装mysql
某政务云项目业务系统迁移调研实践
云迁移的六大场景
MYSQL一种分表实现方案及InnoDB、MyISAM、MRG_MYISAM等各种引擎应用场景介绍
剑指offer刷题(1)--面向华为
随机推荐
elk安装
VMware installation 64 bit XP Chinese tutorial
在电视屏幕上进行debug调试
Installation and use of postman pit
Arrays类的使用案例
百度笔试2022.4.12+编程题目:简单整数问题
mysql查询库大小
jsp学习3
uni-app消息推送
Logging module
js 抛物线运动方法封装
Some good articles on pthread multithreading
redis数据库讲解(四)主从复制、哨兵、Cluster群集
多云数据流转?云上容灾?年前最后的价值内容分享
DP energy Necklace
OpenStack命令操作
VMware15Pro在Deepin系统里面挂载真机电脑硬盘
Visio画拓扑图随记
STD:: map and STD:: vector memory free
政务云迁移实践 北明数科使用HyperMotion云迁移产品为某政府单位实施上云迁移项目,15天内完成近百套主机迁移