css3制作的3d效果
2013-10-15 16:45
330 查看
html:图片自己找个替换上去
HOT
HOT
HOT
css:#content_quiz section{ position:relative; -webkit-perspective:2; float:left; width:25%; margin-right:5%;}#content_quiz section .film {-webkit-transform-style:preserve-3d; height:390px; }#content_quiz section .film div{ position:absolute;-webkit-backface-visibility:hidden;}#content_quiz
section .back{ height:390px; background:#000; font-size:20em; color:#fff; font-weight:bold; -webkit-transform:rotateY(180deg);}#content_quiz section .film:hover{ -webkit-transform:rotateY(180deg);}需要注意的地方:1.-webkit-perspective:2;设置透视,开启3d模式,开启后,只有该父级元素的第一个子元素才能延续它的透视。2.section下的第一个子元素必须设置高度,要不然section浮动后,都重叠在一起了3.film下的div,必须加backface-visibility:hidden和绝对定位;来隐藏掉反面,反面的那个div必须加上transform:rotateY(180deg);否则会覆盖到正面的上面
HOT
HOT
HOT
css:#content_quiz section{ position:relative; -webkit-perspective:2; float:left; width:25%; margin-right:5%;}#content_quiz section .film {-webkit-transform-style:preserve-3d; height:390px; }#content_quiz section .film div{ position:absolute;-webkit-backface-visibility:hidden;}#content_quiz
section .back{ height:390px; background:#000; font-size:20em; color:#fff; font-weight:bold; -webkit-transform:rotateY(180deg);}#content_quiz section .film:hover{ -webkit-transform:rotateY(180deg);}需要注意的地方:1.-webkit-perspective:2;设置透视,开启3d模式,开启后,只有该父级元素的第一个子元素才能延续它的透视。2.section下的第一个子元素必须设置高度,要不然section浮动后,都重叠在一起了3.film下的div,必须加backface-visibility:hidden和绝对定位;来隐藏掉反面,反面的那个div必须加上transform:rotateY(180deg);否则会覆盖到正面的上面
相关文章推荐
- 见过这样的用CSS3制作的3D立体效果文字吗?
- CSS3制作的3D阴影效果
- HTML5+CSS3+JS学习笔记-12-使用JS及函数来制作表格加上3D透视效果
- 如何利用CSS3制作3D文字效果
- css3制作3d翻转效果
- 纯CSS3制作骰子3D旋转动画效果
- 用css3,transform3d制作房屋全景展示效果(一)
- 3D Grid Effect – 使用 CSS3 制作网格动画效果
- 使用css3 background属性制作3D易拉罐效果
- 推荐7个 CSS3 制作的创意下拉菜单效果
- 用CSS3的box-reflect来制作倒影效果
- Css3制作变形与动画效果
- css3 3D盒子效果
- css3 3D效果
- CSS3字母卡片开关门3d效果
- 使用css3的transform制作apple的展示台效果
- 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
- 在CSS3中制作小三角形效果代码
- CSS3之3D效果中的transform运用
- 用CSS3制作圆形滚动进度条动画效果