css3 3d学习心得



通过这个图片应该清楚的了解到了x轴 y轴 z轴是什么概念了。

首先先给大家看一个小例子：
卡片反转



这个例子只是简单的纯css3 3d 关于y轴旋转 下面是代码：

这是HTML：
<body style="background-color:#23d19d">
  <div id="box">
    <div class="bian zhi1"><img src="imags/kpxz1.jpg" alt=""></div>
    <div class="bian zhi2"><img src="imags/kpxz2.jpg" alt=""></div>
  </div>
</body>
这是css：
body{
  perspective: 800px;
  transform-style: preserve-3d;
}
#box{
  width: 300px;
  height: 300px;
  margin: 0 auto;
  transform-style: preserve-3d;
  position: relative;//相对body定位
  transition: 2s;//运动时间
}
#box:hover{
  transform:rotateY(180deg);//当鼠标移动到上面时让他旋转180°
}
#box .bian{
  width: 300px;
  height: 300px;
  text-align: center;
  line-height: 300px;
  font-size: 100px;
  position: absolute; //.mian相对与#box绝对定位
}
.zhi1{
  background-color: red;
    transform:rotateY(180deg);
}
.zhi2{
    background-color: yellow;
    backface-visibility: hidden;//设置后面的可适度为看不见
}
精彩的代码已经看完了那就聊聊原理吧！

css3 3d 顾名思义是由两个2d名片组成的 但不是让你建立连个2d啊！

  • 一个div要想又3d效果那就得在最外层建立一个3d平面.

  • transform-style: preserve-3d; 3d空间

  • perspective: 800px; 它被成为视距或者紧身.

  • 但是要是相对与body是不是也得给div上一层也得加一个紧身呢！

  • 有了3d效果是不是的有一个像眼镜一样的东西呢 在不同的地方显示的效果也是不一样的

  • perspective-origin:50% 50%; 这就是你的眼镜啦 位置不同效果也就不用了

  • 这样我们的3d空间就已经建立成了。

3d无非就是通过X Y Z轴来进行操作

rotateX/rotateY/rotateZ可以帮助理解三维坐标

translateZ则可以帮你理解透视位置。

transform-origin我们成为基点 在水平方向改变观看div的位置

scale 缩放 rotate 旋转 translate移动 skew倾斜 通过这些来进行3d效果

我相信大家已经初步了解了css3 3d了
魔方

那现在我们再来看一个例子吧！



这是一个正方体也是纯css3 来编写的

首先先让六个面全部叠加在一起 通过自己对3d空间的理解 和 x y z 轴的移动来拼接这个立方体

这是HTML：
<body style="background-color:#23d19d">
  <div id="box">
    <div class="mofang_box"id="mofang_box">
      <div class="mofang qian"><img src="imags/1.jpg"></div>
      <div class="mofang hou"><img src="imags/2.jpg"></div>
      <div class="mofang left"><img src="imags/3.jpg"></div>
      <div class="mofang right"><img src="imags/4.jpg"></div>
      <div class="mofang top"><img src="imags/5.jpg"></div>
      <div class="mofang buttom"><img src="imags/6.jpg"></div>
    </div>
  </div>
  <script type="text/javascript"src="js/index02.js"></script>
</body>
这是css：
img{
  width: 200px;
  height: 200px;
}
#box{
  perspective: 800px;
  transform-style: preserve-3d;
  transition:  5s infinite;
  transform:rotateX(0deg) rotateY(0deg);
}
.mofang_box{
  width: 200px;
  height: 200px;
  margin: 100PX auto;
  position: relative;
  transform-style: preserve-3d;
  transition: 50s;
  transform:rotateX(0deg)rotateY(0deg);
}
.mofang_box:hover{
  transform:rotateX(3600deg)rotateY(3600deg);
}
.mofang{
  width: 200px;
  height: 200px;
  text-align: center;
  line-height: 200px;
  position: absolute;

}
//原来这六个面的div是叠加在一起的通过旋转 移动来让他们形成正方体
.left{
  transform:rotateY(90deg)translateZ(-100px);
}
.right{
  transform:rotateY(90deg)translateZ(100px);
}
.top{
  transform:rotateX(90deg)translateZ(100px)rotateZ(360deg);
}
.buttom{
  transform:rotateX(90deg)translateZ(-100px)rotateZ(180deg);
}
.hou{
  transform:rotateX(0deg)translateZ(-100px)rotateZ(180deg);
}
.qian{
  transform:rotateX(0deg)translateZ(100px);
}

这个例子就不多说了 下面这个是非常炫 而且经常用的banner图：

banner图

这个案例简单的说就是前面做的魔方，用5个魔方拼接起来让他在视觉上成为一体 再给每个魔方设置一个延迟时间 第一个相对第二个延迟 第二个相对第三个延迟 这样一次类推就会有这样的效果了

这是最重要的就是图片的定位 每一个div上显示的都是图片的一部分 我们需要来规定它的位置

.wutai:nth-of-type(2)>.mofang{
  background-position:-100px 0px;
}
.wutai:nth-of-type(3)>.mofang{
  background-position:-200px 0px;
}
.wutai:nth-of-type(4)>.mofang{
  background-position:-300px 0px;
}
.wutai:nth-of-type(5)>.mofang{
  background-position:-400px 0px;
}
.wutai:nth-of-type(6)>.mofang{
  background-position:-500px 0px;
}

他就是规定图片的位置

这是HTML：
<body style="background-color:#23d19d">
  <div id="box"></div>
</body>
这是css;

css里边有-webkit-都是兼容ie的写法；

img{
  width: 100px;
  height: 200px;
}
#box{
  -webkit-perspective: 800px;
          perspective: 800px;
  -webkit-perspective-origin: 50% 50%;
          perspective-origin: 30% 50%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: 5s infinite;
  transition:  5s;
  margin:100px 415px;
}
.wutai{
  width: 100px;
  height: 200px;
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  float: left;
  margin-left: -2px;

}
.mofang{
  width: 100px;
  height: 200px;
  text-align: center;
  line-height: 200px;
  position: absolute;
}
.left{
  width: 200px;
  height: 200px;
  -webkit-transform:rotateY(90deg)translateZ(-100px);
          transform:rotateY(90deg)translateZ(-100px);
  background-color: #000;
}
.right{
  width: 200px;
  height: 200px;
  background-color: #000;
  -webkit-transform:rotateY(90deg)translateZ(0px);
          transform:rotateY(90deg)translateZ(0px);
}
//.wutai:nth-of-type(2)>.mofang这样的很重要  他是改变图片大小的
//这个banner是把5个div拼接起来的所以要改变图片的大小和位置
.wutai:nth-of-type(2)>.mofang{
  background-position:-100px 0px;
}
.wutai:nth-of-type(3)>.mofang{
  background-position:-200px 0px;
}
.wutai:nth-of-type(4)>.mofang{
  background-position:-300px 0px;
}
.wutai:nth-of-type(5)>.mofang{
  background-position:-400px 0px;
}
.wutai:nth-of-type(6)>.mofang{
  background-position:-500px 0px;
}
.top{
  background-image:url(../imags/8.jpg);
  -webkit-transform:rotateX(90deg)translateZ(100px)rotateZ(360deg);
          transform:rotateX(90deg)translateZ(100px)rotateZ(360deg);
  background-size: 500px 100%;//设置图片大小为500px
}
.buttom{
  background-image:url(../imags/9.jpg);
  -webkit-transform:rotateX(90deg)rotateX(180deg)translateZ(100px);
          transform:rotateX(90deg)rotateX(180deg)translateZ(100px);
  background-size: 500px 100%;//设置图片大小为500px
}
.hou{
  background-image:url(../imags/10.jpg);
  -webkit-transform:rotateX(180deg)translateZ(100px);
          transform:rotateX(180deg)translateZ(100px);
  background-size: 500px 100%;//设置图片大小为500px
}
.qian{
  background-image:url(../imags/11.jpg);
  -webkit-transform:rotateX(0deg)translateZ(100px);
          transform:rotateX(0deg)translateZ(100px);
  background-size: 500px 100%;//设置图片大小为500px
}
这是js;
window.onload=function(){
  var box=document.getElementById("box");
  var wutai =box.getElementsByClassName("wutai");
  var gs=5;//遍历的div
  var neirong= '<div class="wutai"><div class="mofang qian"></div><div class="mofang hou"></div><div class="mofang left"></div><div class="mofang right"></div><div class="mofang top"></div><div class="mofang buttom"></div></div>';    //遍历的HTML
  var dom="";
  for(var i=0;i<gs;i++){
    dom+=neirong;//循环遍历div的个数
  }
  box.innerHTML=dom;// 将遍历的div放入html中
  var dian=0;
  box.onclick=function(){
    dian++;
    var jiaodu=dian*90;
    for(var i=0;i<gs;i++){
      wutai[i].style="transition:transform 1s"+100*i+"ms;transform:rotateX("+jiaodu+"deg)";//设置延迟时间和旋转的度数
      }
  }
  setInterval(function(){
    dian++;
    var jiaodu=dian*90;
    for(var i=0;i<gs;i++){
      wutai[i].style="transition:transform 1s"+100*i+"ms;transform:rotateX("+jiaodu+"deg)";
      }
  },3000)//设置计时器让dome自己运动起来
}

最后给大家一个总结吧！

3d世界中的各种有规律的运动效果都可以使用CSS3 transform 3D方法实现我们怎么想就怎么做 3d的世界非常奇妙也非常神奇

作者：常乐

css3 3d学习心得的更多相关文章

  1. css3 3d学习笔记

    几个属性: -webkit-perspective:0;景深(默认0), -webkit-perspective-origin:center center;景深基点(默认中间), -webkit-tr ...

  2. Unity 3D学习心得，程序员开发心得分享！

    Unity开发之路 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享.心创新! ...

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

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

  4. HTML5之CSS3 3D transform 剖析式学习之一

    最近坐地铁发现“亚洲动物基金”在地铁上做了很多公益广告,比较吸引人的是一个月熊的广告.做的很可爱.回去就搜了一下,发现这个网站是HTML5做的,非常炫. 所以想学习一下,方法就是传统的学习办法,模仿. ...

  5. fullpage 插件学习心得

    fullpage.js 是一个基于jquery 的插件,它能够轻松的制作出高大上的全屏网站,主要功能有; 1．支持鼠标滚动 2．支持前进后退和键盘控制 3．多个回调函数 4．支持 CSS3 动画 5． ...

  6. CSS3 3D轮播主要可以分成这样的三类

    中秋节假期这么快就没了,这几天还一直下雨,索性在家看看书.这次看的是Tom Lane的<A Tour of PostgreSQL Internals>.这篇小随笔就算做学习笔记了.园子里面 ...

  7. 好吧，CSS3 3D transform变换，不过如此！

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

  8. 《C语言入门1.2.3—一个老鸟的C语言学习心得》—清华大学出版社炮制的又一本劣书及伪书

    <C语言入门1.2.3—一个老鸟的C语言学习心得>—清华大学出版社炮制的又一本劣书及伪书 [薛非评] 区区15页,有80多个错误. 最严重的有: 通篇完全是C++代码,根本不是C语言代码. ...

  9. css3 3d小demo

    css3 3d案例总结 最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家.就把最近做的比较好的给大家分享下 1.旋转拼图 首先看下效果 代码主要由HTML和CSS3组成,应该说还是比较简 ...

随机推荐

  1. RabbitMQ 消息队列 配置

    CentOS 7 x64  rabbitmq 一.CentOS 7 yum 添加epel 源 yum -y install epel-release 1. yum -y install erlang ...

  2. python--字符串操作（删除，替换）

    示例: 替换字符串开头和结尾处的空格 1. [代码][Python]代码     跳至 [1] [全屏预览] view source print? 01 # -*- coding: utf-8 -*- ...

  3. #Pragma Pack(n)与内存分配

    #pragma pack(n) 解释一: 每个特定平台上的编译器都有自己的默认"对齐系数"(也叫对齐模数).程序员可以通过预编译命令#pragma pack(n),n=1,2,4, ...

  4. mysql 不同语法

    http://blog.csdn.net/kesaihao862/article/details/6718443 REPLACE INTO id_28_repayid(stub) VALUES(1); ...

  5. Oracle物化视图的用法与总结

    物化视图(material view)是什么? 物化视图是包括一个查询结果的数据库对象,它是远程数据的的本地副本,或者用来生成基于数据表求和的汇总表. 物化视图存储基于远程表的数据,也可以称为快照(类 ...

  6. Dom编程（二）

    document是window对象的一个属性,因为使用window对象成员的时候可以省略window.,所以一般直接写document  document的方法: (1)write:向文档中写入内容. ...

  7. mysql5.7.10和mysql5.5.39两个版本对于group by函数的处理差异

    原理还是没有搞清楚,在官网上看了一下,看的不是很清楚.一并都记录一下. 问题描述: 存在如下数据结构 sql: 求用户最近更新的那条记录 思路: 按照modify_time排序后按照user_id分组 ...

  8. Unity3D ——强大的跨平台3D游戏开发工具（二）

    第二章 Unity3D的简单预览 每个Unity3D版本都会自带一个Demo源文件.在3.0的正式版中,自带的Demo就是网上展示的那款强大的射击游戏.在一般情况下,您只要第一次 打开Unity3D ...

  9. SpringBoot JPA实现增删改查、分页、排序、事务操作等功能

    今天给大家介绍一下SpringBoot中JPA的一些常用操作,例如:增删改查.分页.排序.事务操作等功能.下面先来介绍一下JPA中一些常用的查询操作: //And --- 等价于 SQL 中的 and ...

  10. HTML段落自动换行的样式设置

    在HTML的P标记中,默认情况下是自动换行的. 如果你的段落是由中文字符或者英文单词组成的,这基本没什么问题.但是如果你的段落是由不间断的英文字母(浏览器会认为是一个单词)组成,则默认情况下不会换行, ...