未加星标

CSS3 3D Transformations not working in Chrome (Linux)

字体大小 | |
[系统(linux) 所属分类 系统(linux) | 发布者 店小二05 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

You will need linux Chrome to see this. On my dev site spoilmebox.com (see three boxes on bottom), my backface is showing through. How do I fix this?

CSS...

.Qcontainer { position: relative; -webkit-perspective: 800; -moz-perspective: 800; perspective: 800; background: none; } .pumpkinhead { width:100%; height:15em; -webkit-transform-style: preserve-3d; -webkit-transition: 1s; -moz-transform-style: preserve-3d; -moz-transition: 1s; transform-style: preserve-3d; transition: 1s; } .Qcontainer:hover .pumpkinhead { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); } .face { position: absolute; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; z-index: 5; } .back { width: 66%; height:127%; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); background: #000000; background: -webkit-linear-gradient(top, rgba(0,0,0,0.65)0%, rgba(0,0,0,0)100%); z-index: 4; padding: 15%; }

html...

<div class="row-fluid"> <div class="span4 Qcontainer"> <div class="pumpkinhead"> <div class="face front"> <h2 class="g2-unit-header">...</h2> <p style="min-height: 240px;">...</p> <p><a href="#" class="btn btn-info">...</a></p> </div> <div class="face back"> <p>this is my back fool!</p> </div> </div> </div> </div>

Notice I am using bootstrap (span4) but I don't believe this is messing up because it is working in Chrome (windows) and Firefox.

The source for this code was Responsive Web Design with html5 and CSS3 by Ben Frain

I am already using jQuery and javascript on this site, so not looking for an alternative. I want to support this new CSS3 technology if I can get it to play with most of the browsers.

Problem courtesy of: Shane

Solution

This is, from what I can tell, a bug in a recent build of Chrome on Linux (I haven't tested on other platforms yet); you will notice that every other site utilising the same CSS transformations now has a problem with the backface showing through. I've also noticed on my own site that perspective is no longer being rendered.

Whilst annoying, we must remember that prefixed CSS features are still experimental ones, and we shouldn't be relying on them to remain stable or even to remain present.

Solution courtesy of: David

本文系统(linux)相关术语:linux系统 鸟哥的linux私房菜 linux命令大全 linux操作系统

tags: lt,gt,div,transform,webkit,class,rotateY,180deg,moz,backface,Chrome
分页:12
转载请注明
本文标题:CSS3 3D Transformations not working in Chrome (Linux)
本站链接:https://www.codesec.net/view/586912.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 系统(linux) | 评论(0) | 阅读(23)