html如何实现立体效果,CSS3实现3D立体效果
CSS3实现3D效果 1. 涉及到的几个CSS3属性 首先大家需要了解transform属性,主要有平移(translate),缩放(scale),拉伸(skew),旋转(rotate)。 这里涉及到3d转换的主要介绍旋转。 下面通过一组rotate效果直观理解rotateX,rotateY,rotateZ区别。 代码: .box{ width: 200px;height: 200px; background:#abcdef; margin:100px; float:left; } .box1{ -webkit-transform:rotatex(45deg) } .box2{ -webkit-transform:rotatey(45deg) } .box3{ -webkit-transform:rotatez(45deg) } .stage{ height: 300px; border: 1px solid blue; -webkit-transform-style:preserve-3d; -webkit-perspective:300px; }
rotateX
rotateY
rotateZ
效果如图:
分析:仔细看上面代阿码中,三个div框套在一个id为stage的div父框中。父框即为舞台,我们假设站在舞台下面看表演,整个父框就是舞台,里面的子元素就是演员,呈现出不同的姿态,面向我们的是rotateX,侧身的rotateY,在屏幕屏幕滚动的是rotateZ。
Z轴其实就是我们眼睛看过去的方向。
stage里面有个非常重要的属性:
1)transform–style属性指定嵌套元素是怎样在三维空间中呈现,CSS规范里面这样规定:
flat 子元素将不保留其 3D 位置。
preserve-3d 子元素将保留其 3D 位置。
所以我们为了3d呈现,添加该属性:
-webkit-transform-style:preserve-3d
2)perspective的中文意思是:透视,视角。我们透视点应该就在浏览器的前方。所以该属性设置的距离越大,舞台离我们越远,呈现的元素就会越小。
perspective属性的存在与否决定了你所看到的是2次元的还是3次元的,也就是是2D transform还是3D transform。没有透视,不成3D。
3)给子元素设置translateZ。我们知道在2d变换中有translate属性,这个也是一样,只不过是顺着z轴平移,也就是设置的translateZ值越小,则子元素大小越小(因为元素远去,我们眼睛看到的就会变小);translateZ值越大,该元素也会越来越大,当translateZ值非常接近perspective设置的像素,但是不超过该像素的时候(如300像素),该元素的大小就会撑满整个屏幕。接下来我们会利用该属性来调整子元素,实现一个立方体的效果。
2. 立方体制作
立方体有六个面,如果舞台中立方体正对我们,我们只能看到一个正面,也就是其他5个面都看不见。
我们通过代码完成前面(本文代码是在chrome浏览器测试,以下代码能够兼容webkit内核和火狐浏览器):
.box6{
-webkit-transform: translatez(100px);
-moz-transform:translatez(100px);
background: rgba(0,255,255,.5);
}
translateZ让平面向视点走100px。
所以第二个平面背面的代码:
.box5{
-webkit-transform: translatez(-100px);
-moz-transform:translatez(-100px);
background: rgba(153,204,255,.5)}
同理:两个侧面的代码就是rotateY:90,同时左右分开100px像素,代码如下:
.box1{
-webkit-transform:rotatey(90deg) translatez(-100px);
-moz-transform:rotatey(90deg) translatez(-100px);
background: rgba(128,0,128,.5);
}
.box2{
-webkit-transform:rotatey(90deg) translatez(100px);
-moz-transform:rotatey(90deg) translatez(100px);
background: rgba(255,0,255,.5);
}
上下两个平面,代码:
.box3{
-webkit-transform:rotatex(90deg) translatez(100px);
-moz-transform:rotatex(90deg) translatez(100px);
background: rgba(255,153,204,.5);
}
.box4{
-webkit-transform:rotatex(90deg) translatez(-100px);
-moz-transform:rotatex(90deg) translatez(-100px);
background: rgba(0,204,255,.5);
}
再将开始的html页面增加几个div,调整一下:整体代码如下:
.box{
width: 200px;height: 200px;
background:#abcdef;
position: absolute;/每个平面都需要进行平移,在舞台上默认水平居中,所以设置绝对定位/
left:50%;/在舞台上水平居中/
top:20%;
}
.box1{
-webkit-transform:rotatey(90deg) translatez(-100px);
-moz-transform:rotatey(90deg) translatez(-100px);
background: rgba(128,0,128,.5);
}
.box2{
-webkit-transform:rotatey(90deg) translatez(100px);
-moz-transform:rotatey(90deg) translatez(100px);
background: rgba(255,0,255,.5);
}
.box3{
-webkit-transform:rotatex(90deg) translatez(100px);
-moz-transform:rotatex(90deg) translatez(100px);
background: rgba(255,153,204,.5);
}
.box4{
-webkit-transform:rotatex(90deg) translatez(-100px);
-moz-transform:rotatex(90deg) translatez(-100px);
background: rgba(0,204,255,.5);
}
.box5{
-webkit-transform: translatez(-100px);
-moz-transform:translatez(-100px);
background: rgba(153,204,255,.5);
}
.box6{
-webkit-transform: translatez(100px);
-moz-transform:translatez(100px);
background: rgba(0,255,255,.5);
}
.stage{
height: 300px;
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
-webkit-perspective:0px;
position: relative;/为了让子元素相对于stage参照定为,在此设置为定位属性/
}
运行后效果如下:
我们刚开始说了,只能看到正面,现在我们如果将舞台旋转起来,各个平面就可以一览无余了。
这里给舞台div设置旋转动画:
-webkit-animation:mydonghua 5s ease infinite;
-moz-animation:mydonghua 5s ease infinite;
接下来定义mydonghua的行为:
@-webkit-keyframes mydhua{
0%{-webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);-webkit-transform-origin: center center;}
100%{-webkit-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg);-webkit-transform-origin: center center; }
}
@-moz-keyframes mydhua{
0%{-moz-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);-webkit-transform-origin: center center;}
100%{-moz-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg); -webkit-transform-origin: center center;}
}
最终运行效果(此处截图,应该是一个反复旋转的动画):
小结
CSS3涉及到3d变换关键属性:
1. perspective属性,该属性表示视点,该属性调整我们视点的远近。
2. rotate(degree),旋转分别绕x,y,z轴进行degree度旋转。
3. transform-style可以设置元素所处的是3d空间还是平面。Flat表示平面。
4. translateZ 绕z轴平移,调整平面向自己所面向的方向移动的距离。如果取值为负值,表示平面向背向的方向移动一定距离。
html如何实现立体效果,CSS3实现3D立体效果相关推荐
- css3实现翻转效果,css3 实现3D翻转效果
css3 实现3D翻转效果. HTML源码: 前面内容,鼠标移到这,试试 用户名 密码 css源码: /* entire container, keeps perspective */ .flip-c ...
- html5 相册翻转效果,HTML5 css3:3D旋转木马效果相册
这篇博客的目的是因为上篇HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果中有个关于CSS 3D效果的比较重要的知识点没讲到,就是perspective和tranlateY 效果 ...
- 玩转CSS3的3D动画效果
效果展示 基础知识 transform-style:启用 3D 模式 要利用 CSS3 实现 3D 的效果,最主要的就是借助 transform-style 属性.transform-style 只有 ...
- html怎么制作3D字体,用CSS3制作3D文字效果代码实例教程
这个简单的CSS文本阴影教程将一步步教你如何通过堆叠多层阴影来创建3D文字,然后进一步利用CSS3的transform和transition属性来实现鼠标移过字体放大的效果. 阿里西西web开发网为大 ...
- css3实现3D立体翻转效果
1.在IE下无法显示翻转效果,火狐和谷歌可以 1 /*样式css*/ 2 3 .nav-menu li { 4 display: inline; 5 } 6 .nav-menu li a { 7 co ...
- CSS3实现3D立体效果
CSS3实现3D效果 1. 涉及到的几个CSS3属性 首先大家需要了解transform属性,主要有平移(translate),缩放(scale),拉伸(skew),旋转(rotate). 这里涉及到 ...
- 浅谈css3的3D动画效果并制作一个简单的旋转照片墙
各位读者大家好,我是一只小菜鸟.目前正在学习web前端方面的相关知识.,这也是小菜鸟第一次写博客.写的有哪里不对的地方欢迎各位指正. 本篇文章内容就是利用简单的HTML布局再加上CSS3的3D转换和动 ...
- php3d按钮,css3实现3D按钮效果的文章推荐
使用css3代码来制作3D按钮效果,这是一个系列的3D按钮制作效果,制作方法是老套(万变不离其中),但其中色彩的调各非常不错,因为很多效果在PS中制作是容易,特别对于设计师来说更容易,但对于一名cod ...
- 利用css3实现3d立体特效--正方体
其实css3中提供了很多让我们实现非常炫酷的工具,好多特效不需要通过复杂的js代码来实现,而可以通过简单的css3代码来实现,这一次我就给大家介绍一下3d立体盒子的实现以及动画的实现. 要实现这个正当 ...
最新文章
- kafka中controller的作用_Kafka 常见问题汇总
- 图片适应窗口_在word中插入图片,如何避免失真模糊?实用文档建议收藏
- Ellipsoid HDU - 5017(模拟退火)
- Linux之《荒岛余生》(二)CPU篇
- 聚合,组合,继承的区别
- VC++ COleSafeArray VARIANT的使用
- Show ip arp 和 Show mac-address-table
- android go 刷机教程,安卓用的久了,如何刷机?安卓手机线刷教程
- pacemaker+mysql+drbd
- excel能创建html吗,如何通过Excel电子表格使用循环创建单独的HTML发布页面
- python支持中文注释
- 大数据项目实战二之电信大数据项目
- 利用NetToPLCsim将西门子PLCSIM变成一个真实PLC,实现与录波软件、HMI软件等的通讯
- 飞思卡尔智能车知识总结
- 触摸精灵之keepScreen
- 超市管理系统-2(数据库代码以及数据库逻辑)
- java窗口样式_美化窗口样式 java窗口界面美化包
- VIM_readme
- 用Python3爬取知乎上好看的壁纸
- TA-Lib C++金融技术分析库使用初体验
热门文章
- t检验orF检验and多重比较
- java体育管理系统6,体育场馆管理系统
- 基于Abaqus的边坡可靠度计算
- 展示软件下载v2.0
- 劳动仲裁1——保姆级教程(打工人程序猿,维权少走弯路)
- 【C语言进阶】⑦字符串函数详解
- 积分排名页面 html,欧洲联赛排名积分榜
- 说说如何在 Excel 中构建类似 Microsoft Project 中的任务层级结构
- 计算机等级一考通2021,驾考一点通2021保过版
- uoLib - .Net 项目基础类库 基于C#, 可用于.Net Framework 2.0/3.5, 免费下载使用