work转换html,翻转换图.html · 张斯佗罗夫柯基/personal work notes

反转换图

#box{

width: 440px;

height: 824px;

margin: 200px auto;

border: 2px solid black;

perspective: 1000;

position: relative;

overflow: hidden;

}

img{

display: block;

position: absolute;

backface-visibility: hidden;

top: 0;

left: 0;

}

.font{

z-index: 10;

}

.back{

z-index: 5;

transform: rotateY(180deg);

}

.rever{

transition: all 1s;

position: relative;

transform-style: preserve-3d;

-webkit-transform-style: preserve-3d;

}

#box:hover .rever{

transform: rotateY(180deg);

}

span{

position: absolute;

display: block;

width: 0;

height: 0;

background-color: red;

transition: all 1s;

}

.heng{

left: 0px;

height: 2px;

}

.heng-t{

top: 5px;

}

.heng-b{

bottom: 5px;

}

.shu{

top: 0px;

width: 2px;

}

.shu-l{

left: 5px;

}

.shu-r{

right: 5px;

}

#box:hover .heng{

width: 450px;

}

#box:hover .shu{

height: 834px;

}

.shadow{

width: 100%;

height: 100%;

background-color: rgba(0,0,0,.5);

position: absolute;

z-index: 20;

transform: translateY(100%);

transition: all .7s;

color: white;

font-size: 40px;

text-align: center;

}

.shadow p{

height: 170px;

position: absolute;

top: 50%;

margin-top: -85px;

}

#box:hover .shadow{

transform: translateY(0);

}

终于成功了！这个demo涵盖：1边线动态生成；2翻转换图；3遮盖层淡入

一键复制

编辑

Web IDE

原始数据

按行查看

历史

work转换html,翻转换图.html · 张斯佗罗夫柯基/personal work notes - Gitee.com相关推荐

在线js视频格式转换截图翻转编辑ffmpeg等操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
金山云张斯聪：探索沉浸式解决方案提升教育云上体验
"5G低延迟.高带宽.高并发的特点,将极大推动音视频沉浸式体验的提升.我们一直在互动互联.高清视频.人工智能等技术领域蓄力,以提升教育云上体验."金山云CDN与视频云产品总负责人张 ...
用算法合成新药：一场新式卡斯帕罗夫与深蓝的巅峰对决
本文来自AI新媒体量子位(QbitAI) 一分子就是一世界. 对药物研发人员来说,确实这样.在这篇<Nature>的文章中,渥太华记者Asher Mullard将把你拉进一个药香世界. 故 ...
被AI击败的“第一代李世石”卡斯帕罗夫：我和机器和解了！
数据猿报道 23年前,俄罗斯国际象棋大师加里·卡斯帕罗夫(Garry Kasparov)输给了IBM超级计算机--人工智能深蓝(Deep Blue):23年后,卡斯帕罗夫在媒体采访中表示,人类需要学会 ...
败给深蓝20年后，棋王卡斯帕罗夫说：智能机器不是人类的威胁
本文来自AI新媒体量子位(QbitAI) 1985年,22岁的棋手卡斯帕罗夫拿下了他人生中的第一个世界冠军,再也没有人类能撼动他在国际象棋界的地位. 1997年5月11日,卡斯帕罗夫对阵IBM&quo ...
我与机器斗争过但失败了：与深蓝“人机大战”20年，卡斯帕罗夫TED演讲
大数据文摘字幕组作品如果我们想利用科技,就必须直面恐惧. --加里·卡斯帕罗夫卡斯帕罗夫生于1963年前苏联.俄罗斯国际象棋棋手 22岁成为世界上最年轻的国际象棋冠军接下来的职业生涯里他获 ...
输给“深蓝”20年后，卡斯帕罗夫撰文呼吁对人工智能抱持乐观心态
雷锋网(公众号:雷锋网)按:1997年5月11日,IBM 深蓝计算机打败了当时世界国际象棋冠军加里·卡斯帕罗夫,这成为了载入史册的历史性事件.事隔20年后,围棋领域的AlphaGo也即将与世界排名第一 ...
当年打败世界冠军卡斯帕罗夫的深蓝电脑计算能力到底有多快？
2017年,AlphaGo战胜李世石和柯洁,让人工智能再一次热起来.其实,早在1997年,IBM的深蓝电脑因在国际象棋比赛中,人工智能就已经首次战胜了人类国际象棋冠军卡斯帕罗夫.抛开背后的算法不说,只 ...
3D转换 —— 两面翻转盒子和3d导航栏
3d转换和2d转换的最大区别就是,2d是二维坐标系,是平面的,而3d是三维坐标系,具有空间感.立体感.在3d转换中,有两个特别重要的属性perspective.transform - style. p ...

work转换html,翻转换图.html · 张斯佗罗夫柯基/personal work notes - Gitee.com

work转换html,翻转换图.html · 张斯佗罗夫柯基/personal work notes - Gitee.com相关推荐

最新文章

热门文章