3D 立体 backface-visibility

<!DOCTYPE html>
<html><head><!--backface-visibility属性用来设置，是否显示元素的背面，默认是显示的backface-visibility:keyword;keyword有两个值，hidden和visible，默认是是visible所以是在每个元素里面设置的--><meta charset="UTF-8"><title></title><style type="text/css">*{padding: 0;margin: 0;}#wrap{position: absolute;left: 50%;top: 50%;width: 400px;height: 400px;margin-left: -200px;margin-top: -200px;border: 1px solid;perspective: 200px;background: url(3.jpg) no-repeat;background-size:100% 100%;}#wrap > .box{width: 100px;height: 100px;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;transform-style: preserve-3d;transition: 3s;transform-origin: center center 50%; }#wrap > .box > div{position: absolute;width: 100px;height: 100px;background: rgba(123,321,333,.3);text-align: center;font: 50px/100px "微软雅黑";backface-visibility: hidden;}#wrap > .box >div:nth-child(5){top: -100px;transform-origin: bottom;transform: rotateX(90deg);}#wrap > .box >div:nth-child(6){bottom: -100px;transform-origin: top;transform: rotateX(-90deg);}#wrap > .box >div:nth-child(3){left: -100px;transform-origin: right;transform: rotateY(-90deg);}#wrap > .box >div:nth-child(4){right: -100px;transform-origin: left;transform: rotateY(90deg);}#wrap > .box >div:nth-child(2){transform:   translateZ(-100px) rotateX(180deg);}#wrap > .box >div:nth-child(1){z-index: 1;}#wrap:hover .box{transform: rotate3d(1,1,1,180deg);}</style></head><body><div id="wrap"><div class="box"><div>前</div><div>后</div><div>左</div><div>右</div><div>上</div><div>下</div></div></div></body>
</html>

转载于:https://www.cnblogs.com/caicaihong/p/9634064.html

3D 立体 backface-visibility相关推荐

html 3d立体阴影效果图,CSS3打造带阴影的旋转3D图像
CSS3打造带阴影的旋转3D图像 Sponsor CSS3可以实现很多创新好玩的交互效果,正如今天将和大家介绍的3D旋转图像,效果很漂亮,这个旋转图像的特别之处就是支持阴影旋转和兼容响应式网页设计,使 ...
css3实现3D立体翻转效果
1.在IE下无法显示翻转效果,火狐和谷歌可以 1 /*样式css*/ 2 3 .nav-menu li { 4 display: inline; 5 } 6 .nav-menu li a { 7 co ...
3d相册 html 代码_HTML5 3D立体图片相册
插件简介 HTML5非常强大,尤其是和CSS3结合,有时候能达到非同凡响的网页动画效果.今天要分享的这款HTML5应用就是一款很酷的3D立体图片相册应用,它可以用鼠标拖拽从多个角度浏览相册图片,点击图 ...
android动态视力测试,Chop It-看起来有点无聊却可训练动态视力的 3D 立体小游戏（iPhone, Android）...
Chop It 是一款集合多种动作主题的小游戏,包含砍柴.槌钉子.敲石块.锯木头--等,目标物会从屏幕左右两边出现,当移动到适当的位置时,就点击屏幕执行动作,需准确的击中才能继续游戏,否则即会终结此回 ...
HTML做3D立体特效,html5 3D立体粒子波浪动画特效代码
特效描述:html5 3D立体粒子波浪动画.3D 粒子动画特效代码结构 1. 引入JS 2. HTML代码 /// Scene const sceneSettings = { width: () ...
jsp图片墙_JS实现的非常漂亮的3D立体照片墙显示效果
[实例简介] JS实现的非常漂亮的3D立体照片墙显示效果 [实例截图] [核心代码] JS实现的非常漂亮的3D立体照片墙显示效果 └── 3D立体照片墙 ├── images │ ├── 0e85 ...
ai如何旋转画布_「AI教程」使用AI制作3D立体文字效果
今天macdown小编要通过AI制作一种3D立体字体,主要的知识点是混合工具的使用.Shift键.Alt键的灵活运用.3D旋转命令.投影效果的创建等,学会后可以应用在需要的设计中,比如海报设计,log ...
python画3d心形_有了这几个3D立体手工教程，幼儿园手工作业再也不用愁！
大家都听说过3D纸模吗? 妈队今天带来了初级的3D纸模DIY教程非常有意思哦!可以做出很多立体效果的小玩意快来一起试试吧! 3D立体雪花南方的宝宝不知道有没见过雪呢? 今天就教大家做一款立体雪花冬天 ...
JS 实现3D立体效果的首页轮播图（瞬间让你的网站高大上，逼格满满）
还是那句话,废话少说,直接上源代码:http://download.csdn.net/detail/cometwo/9387901 <html> <head> <titl ...
jquery环形3D立体旋转特效
jquery环形3D立体旋转特效作者/代码整理:站长素材 (转载请附加本文地址,带有"懒人原生"字样的谢绝转载)发布日期:2013-07-20 立体效果比较强的jquery特效 ...

3D 立体 backface-visibility

3D 立体 backface-visibility相关推荐

最新文章

热门文章