2 u011500781 u011500781 于 2016.01.22 09:55 提问

css3 3D效果的一个问题?

源代码:

 <!DOCTYPE html>
<html lang="en">
<head>
    <style>

        .ctn {margin: 100px; perspective: 300px; transform-style: preserve-3d; border: 1px solid red; font-size: 0; position: relative;}
        .ctn div {left: 100px; width: 50px; height: 80px; display: inline-block; position: absolute;}
        .ctn .ctx1 {background: yellow; transform: rotateX(45deg);}
        .ctn .ctx2 {background: green; transform: rotateX(80deg);}



    </style>
</head>
<body>

    <div class="ctn">
        <div class="ctx1"></div>
        <div class="ctx2"></div>
    </div>

</body>
</html>

我想要的效果:
图片说明

解释:

一定要交叉起来,这样更有空间感,但是只有chrome浏览器支持,ff和ie都不行,求帮助,我试过了-moz-,-ms-,-webkit-各种前缀都不行,请亲试过后来给小弟指点方向,谢啦!!

3个回答

showbo
showbo   Ds   Rxr 2016.01.22 15:21

版本问题吧?我这类chrome 38就没有你发的图片效果
图片说明

MissArts
MissArts   2016.02.15 16:52

你加一下浏览器的兼容试试,应该是浏览器的兼容问题。

MissArts
MissArts   2016.02.15 17:07

刚才没看清你的解释,我试了一下,把transform-style: preserve-3d;这句删掉之后就不重叠了。

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
利用css3实现3d立体特效--正方体
其实css3中提供了很多让我们实现非常炫酷的工具,好多特效不需要通过复杂的js代码来实现,而可以通过简单的css3代码来实现,这一次我就给大家介绍一下3d立体盒子的实现以及动画的实现。      要实现这个正当体盒子你要对css3的内容有基本的了解而且要具备css中基本的语法,css3中主要掌握的内容如下: 了解css3中的transform中的scale(伸缩),旋转rotate,以及平
使用纯CSS3实现一个3D旋转的书本
有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制,而其中图书的展示是最为简单的一种,无需复杂的建模过程,使用图片和CSS3的一些变换即可实现更好的展示效果,简洁而实用。书本的3D模型是所有商品中最为简单的,因为其本质上就是一个立方体(cube),只是带有封面/封底和左侧封条。所以要构造一个3D书本展示,问题就被分解为构造一个立方体+旋转+图片背景。
如何使用CSS3实现一个平滑的3D文本标题
要实现3D文本,基本上有3种方法: 1. 使用CSS3的投影滤镜(filter: drop-shadow) 2. 使用3d建模和CSS3 3d变换来实现(最真实) 3. 使用CSS3 text-shadow属性来实现(最简单,可复制,现代浏览器都支持) 本例简单说明使用text-shadow属性来实现3D文本的原理和方法。
CSS3实现3D效果的弹出框
首先,用css3做一个触发弹出框的按钮: border-radius: 10px; /*圆角*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; box-shadow: 10px 10px 5px #888; /*阴影(x,y,w,color)*/ -webkit-
CSS3实现3D效果
CSS3动画效果3D1.属性perspective :透距离,单位像素(值越小,透视距离越近,效果越明显):设置父元素上perspective-origin: 设置透视点的位置transform-style :指定某元素的子元素是位于三维空间内,取值:flat | preserve-3d2.坐标3.方位4.实例4.1翻转幻灯片4.1.1效果4.1.2思路(1)给div设置4个img<div id="
css3 2d/3d变换——实现超炫的特效
声明:所有结论都是经过实际代码运行的效果证实的,如果有不同的情况发生,请核对浏览器版本以及内核(360浏览器,webkit内核)是否与本人试验的时候一致,同时非常感觉读者阅读本文,如有错误之处,欢迎大家留言指出。 css3的2d/3d变换是一个很强大的功能,以前想要做到图片的倾斜或者旋转某个角度,都无法简单的做到,更别说3d效果的实现,这里的3d效果其实也是一种2d变换之后给人的一种视觉欺骗
css3 js实现3D旋转效果
用css3和js实现3D旋转的效果,主要使用到css3 transform中的一些属性:perspective,rotate,translate。下面主要介绍一些transform中的属性的效果和作用: 1.transform-style:一般是块级元素使用此属性,使用了此属性后的块级元素会在保持3D效果,但是如果仅仅使用此属性是不会看出3D特效的,必须和其他的属性一起使用才能呈现出3D效果。
用css3,transform3d制作房屋全景展示效果(一)
我最终想要做一个这样的效果,如图: (注:这本来是一个横向旋转的动图,但是动图有点大,只能先放一个静态的) 我选择用手机端来展示,因为手机端浏览器对css3支持的比较好。制作这样的一个效果之前,首先要学会制作一个3d的盒模型,就跟div盒子布局一样。但是自从有了h5和css3之后,我们就有了制作3d盒子模型的能力。不多说先写为敬。 首先我们先建立一个h5的基础结构: html
CSS3实现3d效果的立体盒子
学习css3那会写的案例,有一段时间了,那会还没有博客呢,现在有博客了,就把一些自我感觉比较好的案例都放上来了。 当时用DW写的,所以css代码可能看起来会有一点乱,看到的朋友多多包涵哦!   xmlns="http://www.w3.org/1999/xhtml">     http-equiv="Content
CSS3景深、三维变换属性及旋转三维立方体的实现
上周简单写了一下2D变换 今天来写写3D变换 三维立体效果我觉得是CSS3中最有意思的地方 不得不佩服那些开发者大神们 让我们能够通过几行CSS代码就能得到酷炫的视觉体验浏览器坐标系在讲正式语法之前,首先需要了解浏览器坐标系 这需要我们把浏览器界面想象成一个立体的场景这是网上流传很广的浏览器坐标系图片 从左到右的方向是浏览器x轴的正方向 从上到下的方向是浏览器y轴的正方向 而z轴正方