css3 3D变形 transfrom初学

这个礼拜学了css3 3d,感觉到css无穷的魅力,可以通过几个特定的代码符号创建出3D效果的页面。


透视

一个元素需要一个透视点才能激活3D空间,有两种方法可以得到透视点(视点,焦距):

1.直接书写perspective

perspective: 600;

2.transfrom书写

transfrom:perspective(600px);

这两种发放都能实现

3.perspective-origin可以实现视角的转换默认为正中心:

好几种设置方式:perspective-origin:center center``perspective-origin:50% 50%还可以设置px;

一个页面想实现3d效果必须加上这一句

transform-style: preserve-3d;才能实现3D效果以上元素缺一不少;


transfrom

  • transfrom:transform有三种转变方法;
  • 旋转(rotate):rotateX()旋转X轴 rotateY()旋转Y轴 rotateZ()旋转Z轴
  • 缩放(scale)大小缩放效果跟2D效果一样
  • 移动(transtate)transtate(Z)前后移动。

用css3书写3D效果上面那两部缺一不可;

现在用几个实例来个大家验证一下css3 3D效果,让大家能够更好的理解css3 3D


卡牌反转效果



这个案例纯js就能写出来

首先HTML排版

<div class="box">
<div class="box1 box11"></div>
<div class="box1 box12"></div>
</div>

最简单的几个DIV排版

css代码如下

body{
transform-style:preserve-3d;//创建3d页面
perspective:500px;
background:#81b7c1;
}
.box{
width:200px;
height:200px;
margin:50px auto;
transform-style:preserve-3d;
position:relative;
transform:rotateY(0deg);
transition:transform 0.5s;
}
.box1{
width:200px;
height:200px;
position:absolute;
line-height:200px;
font-size:100px;
text-align:center;
transform-style:preserve-3d;
transform:rotateY(0deg);
}
.box:hover{
transform:rotateY(180deg)
}
.box11{
background:url(../images/3.jpg) no-repeat;
background-size:100%;
}
.box12{
background:url(../images/4.jpg) no-repeat;
background-size:100%;
transform:rotateY(180deg);
backface-visibility: hidden;//隐藏背面
}

上边用到了刚才的transfrom几个属性

立方体



相信这个案例大家对css3 3D的认识更为深切

<div class="cude">
<div class="box">
<div class="box1 front"></div>
<div class="box1 back"></div>
<div class="box1 left"></div>
<div class="box1 right"></div>
<div class="box1 top"></div>
<div class="box1 bottom"></div>
</div>
</div>

css排版


body{
background-color:rgba(46, 112, 72, 0.63);
}
.cude{
perspective:500px;
transform-style:preserve-3d;
}
.box{
transform-style:preserve-3d;
width:200px;
height:200px;
margin:200px auto;
position:relative;
transition:transform 1s;
}
.box:hover{
transform:rotateX(1800deg) rotateY(360deg); translateX(100px);
}
.box .box1{
position:absolute;
width:200px;
height:200px;
line-height:200px;
font-size:100px;
text-align:center;
opacity:1;
}
.box .left{
background-image:url(../images/1.jpg);
background-size:100%;
transform: rotateY(-90deg) translateZ(100px);
}
.box .right{
background-image:url(../images/2.jpg);
background-size:100%;
transform: rotateY(90deg) translateZ(100px);
}
.box .top{
background-image:url(../images/3.jpg);
background-size:100%;
transform: rotateX(90deg) translateZ(100px);
}
.box .bottom{
background-image:url(../images/4.jpg);
background-size:100%;
transform: rotateX(-90deg) translateZ(100px);
}
.box .back{
background-image:url(../images/5.jpg);
background-size:100%;
transform: translateZ(-100px) rotateY(180deg) rotateX(-180deg);
}
.box .front{
background-image:url(../images/6.jpg);
background-size:100%;
transform: translateZ(100px);
}

上边用到了几张图片大家是不是对css3 3D更为深切啦!

最后,学习css3 3D能让大家更好的理解3D效果,增长见识,开拓视野。

css3 3D效果的更多相关文章

  1. css3 3d效果及动画学习

    css参考手册: http://www.phpstudy.net/css3/ http://www.css88.com/book/css/ 呈现3d效果:-webkit-transform-style ...

  2. 一篇文章搞定css3 3d效果

    css3 3d学习心得 卡片反转 魔方 banner图 首先我们要学习好css3 3d一定要有一定的立体感 通过这个图片应该清楚的了解到了x轴 y轴 z轴是什么概念了. 首先先给大家看一个小例子: 卡 ...

  3. CSS3,3D效果轮播图

    ---恢复内容开始--- 大家还记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮播图吧! ....这个轮播图主要是用CSS3里的transform的旋 ...

  4. CSS3——3D效果

    1.效果1 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" c ...

  5. 好吧,CSS3 3D transform变换,不过如此!

    一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...

  6. css3 3D变形 入门(一)

    css3 3D.html div.oembedall-githubrepos { border: 1px solid #DDD; list-style-type: none; margin: 0 0 ...

  7. css3 3d初入门(一)

    css3 3D.html div.oembedall-githubrepos { border: 1px solid #DDD; list-style-type: none; margin: 0 0 ...

  8. CSS3 3D transform变换

    .实际应用-图片的旋转木马效果 您可以狠狠地点击这里:图片的旋转木马效果demo 建议在足够新版本的FireFox浏览器或Safari浏览器下观看,Chrome可能需要居中定位查看,下图为效果缩略图: ...

  9. 好吧,CSS3 3D transform变换,不过如此!——张鑫旭

    一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...

随机推荐

  1. Web 网站 故障常用分析命令

    系统连接状态篇: 1.查看TCP连接状态 netstat -nat |awk '{print $6}'|sort|uniq -c|sort -rn netstat -n | awk '/^tcp/ { ...

  2. 用命令行使用soot反编译生成jimple

    使用工具:soot-2.5.0.jar 注意:soot-2.5.0.jar必须使用Java1.7以及之前的版本,使用Java1.8会发生错误. 修改jdk的方法是在设置java_home的路径的时候, ...

  3. iOS开发之圆角指定

    如果需要将UIView的4个角全部都为圆角,做法相当简单,只需设置其Layer的cornerRadius属性即可(项目需要使用QuartzCore框架).而若要指定某几个角(小于4)为圆角而别的不变时 ...

  4. 通过Jenkins跑Jmeter接口测试脚本,我想当有接口跑失败时Jenkins发送邮件通知,这个如何弄呢

    通过Jenkins跑Jmeter接口测试脚本,我想当有接口跑失败时Jenkins发送邮件通知,这个如何弄呢

  5. mongodbVUE基本操作(转)

    基本操作: http://my.oschina.net/u/1026531/blog/188336

  6. Python collections.defaultdict() 与 dict的使用和区别

    看样子这个文档是难以看懂了.直接看示例: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 import collections s = [('yellow', ...

  7. 1.3. 创建 Grocery Dude 项目(Core Data 应用程序实践指南)

    该程序功能如下: 分类显示家里各个位置的东西,以此提示该购买哪些生活用品 在超市购买时,告诉某个货品摆在哪条过道旁的货架上 将待买物品按过道编组,这样每个过道只需走一遍,就可以拿完所需货品 通过iCl ...

  8. 安装 mrtg

    http://blog.csdn.net/cnbird2008/article/details/2072627

  9. 重新回顾JSP

    由于个人喜好,觉得自己需要学习一下,服务端的语言.JSP之前学过,不够许久未用了. http://www.w3cschool.cc/jsp/jsp-intro.html 1.Java代码片段使用< ...

  10. 《疯狂Java讲义》(七)---- 方法

    一 方法的参数传递机制 Java方法的参数传递方式只有一种:值传递.就是将实际参数值的副本传入方法内,而参数本身不会受到任何影响. eg. 基本类型的值传递 public class Primitiv ...