一、今天让我们来学习一下css 3D吧!

1.首先我们要学习好css3 3d一定要有一定的立体感!

2.再来那就聊聊原理吧!

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

  • 一个div要想又3d效果那就得在最外层建立一个3d平面.
  • transform-style: preserve-3d; 3d空间
  • perspective: 800px; 它被成为视距或者紧身.
  • 但是要是相对与body是不是也得给div上一层也得加一个紧身呢!
  • 有了3d效果是不是的有一个像眼镜一样的东西呢 在不同的地方显示的效果也是不一样的
  • perspective-origin:50% 50%; 这就是你的眼镜啦 位置不同效果也就不用了
  • 这样我们的3d空间就已经建立成了。

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

  • rotateX/rotateY/rotateZ可以帮助理解三维坐标
  • translateZ则可以帮你理解透视位置。
  • transform-origin我们成为基点 在水平方向改变观看div的位置
  • scale 缩放 rotate 旋转 translate移动 skew倾斜 通过这些来进行3d效果

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>正方体</title> <style>
.container{
width: 1300px;
height: 630px;
background: #000;
perspective: 8000px;
border: 1px solid #000;
perspective-origin: -20% 60%;
}
.cube{
transform-style: preserve-3d;
width: 100px;
height: 100px;
position: relative;
margin: 300px auto;
transform: rotateX(30deg) rotateY(0deg);
}
.cube:hover{
animation: zuan 6s linear infinite;
}
@keyframes zuan{
0%{
transform: rotateX(0) rotateY(0deg);
}
100%{
transform: rotateX(360deg) rotateY(360deg);
}
}
.xiao{
position: absolute;
transform-style: preserve-3d;
width: 50px;
height: 50px;
/* transform: rotateX(30deg); */
position: relative;
}
.box{
width: 50px;
height: 50px;
background: rgb(18, 238, 238);
position: absolute;
border: 1px solid #000;
color: #fff;
text-align: center;
line-height: 50px;
}
.box1{
transform: rotateX(-90deg) translateZ(25px);
}
.box2{
transform: rotateX(90deg) translateZ(25px);
}
.box3{
transform: rotateY(90deg) translateZ(25px);
}
.box4{
transform: rotateY(-90deg) translateZ(25px);
}
.box5{
transform:translateZ(25px);
}
.box6{
transform: rotateY(-180deg) translateZ(25px);
} .da{
position: absolute;
transform-style: preserve-3d;
width: 100px;
height: 100px;
/* transform: rotateX(30deg); */
position: relative;
}
.btn{
width: 100px;
height: 100px;
background: rgba(149, 207, 12, 0.925);
position: absolute;
border: 1px solid #000;
color: #fff;
text-align: center;
line-height: 100px; }
.btn1{
transform: rotateX(90deg) translateZ(150px) translateX(-25px);
}
.btn2{
transform: rotateX(-90deg) translateZ(0) translateX(-25px);
} .btn3{
transform: rotateY(-90deg) translateZ(100px) translateY(-75px);
}
.btn4{
transform: rotateY(90deg) translateZ(50px) translateY(-75px);
}
.btn5{
transform: translateZ(75px) translateX(-25px) translateY(-75px);
}
.btn6{
transform: rotateY(180deg) translateZ(75px) translateX(25px) translateY(-75px);
} </style>
</head>
<body> <div class="container">
<div class="cube">
<div class="xiao">
<div class="box box1">too</div>
<div class="box box2">bottom</div>
<div class="box box3">left</div>
<div class="box box4">right</div>
<div class="box box5">before</div>
<div class="box box6">after</div>
</div> <div class="da">
<div class="btn btn1">top</div>
<div class="btn btn2">bottom</div>
<div class="btn btn3">left</div>
<div class="btn btn4">right</div>
<div class="btn btn5">before</div>
<div class="btn btn6">after</div>
</div>
</div>
</div> </body>
</html>

代码如下:
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>星球</title>
<style>
.container{
width: 100vw;
height: 100vh;
background: black;
border: 1px solid transparent;
overflow: hidden;
background-size: 100%; } .cube{
width: 520px;
height: 520px;
margin:0 auto;
position: relative;
border:1px solid #fff;
border-radius: 50%;
padding: 60px; }
.cube::after{
width: 30px;
height: 30px;
border-radius: 50%;
content: "";
display: block;
background: rgba(255, 255, 1, 0.952);
position: absolute;
left: -15px;
top: 305px;
transform-origin: 335px;
animation: zhuan 4s linear infinite; } @keyframes zhuan{
0%{
transform: rotate(0);
}
100%{
transform: rotate(-360deg);
}
}
.mian{
width: 440px;
height: 440px;
border-radius: 50%;
border:1px solid #FFF;
position: relative;
padding: 40px;
}
.diqiu{
width: 16px;
height: 16px;
background: blueviolet;
border-radius: 50%;
position: absolute;
top: 213px;
left: -46px;
transform-origin: 268px;
animation: zhuan 5s linear infinite;
position: relative;
}
.yueliang{
width: 8px;
height: 8px;
background: #fff;
border-radius: 50%;
position: absolute;
left: -15px;
top: 4px;
transform-origin: 24px;
animation: zhuan 1s linear infinite;
}
.er{
width:380px;
height: 380px;
border: 1px solid #fff;
border-radius: 50%; left: 30px;
top: 20px;
position: relative;
}
.dou{
width: 20px;
height: 20px;
background: rgb(156, 48, 102);
border-radius: 50%;
position: absolute;
top: 180px;
left: -10px;
transform-origin: 200px;
animation: zhuan 6s linear infinite;
}
.yan{
width: 80px;
height: 80px;
background: orangered;
border-radius: 50%;
position: absolute;
left: 161px;
top: 161px;
box-shadow: 0 0 50px gold;
}
</style>

</head>
<body>
<div class="container">

<div class="cube">
<div class="mian">
<div class="diqiu">
<div class="yueliang"></div>
</div>
<div class="er">
<div class="dou"> </div> <div class="yan"> </div>
</div> </div>
</div>

</div>

</body>
</html>

持续更新,欢迎大家收藏指教!

css 3D动画的更多相关文章

  1. 奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画?

    本文将从比较多的方面详细阐述如何利用 CSS 3D 的特性,实现各类有趣.酷炫的动画效果.认真读完,你将会收获到: 了解 CSS 3D 的各种用途 激发你新的灵感,感受动画之美 对于提升 CSS 动画 ...

  2. css 3d 动画 相关

    transform-style: preserve-3d; 设置3D模式 perspective:700px :属性定义 3D 元素距视图的距离,以像素计.该属性允许您改变 3D 元素查看 3D 元素 ...

  3. 8个经典HTML5 3D动画赏析

    HTML5技术已经越来越被我们所接受,特别是一些3D的动画特效.本文介绍的8个HTML5 3D动画并没有特别华丽的界面,但是比较实用,涉及到3D图片.3D图表.3D按钮等方面,一起来看看. 1.HTM ...

  4. 第四十二课:基于CSS的动画引擎

    由于低版本浏览器不支持css3 animation,因此我们需要根据浏览器来选择不同的动画引擎.如果浏览器支持css3 animation,那么就使用此动画引擎,如果不支持,就使用javascript ...

  5. 如何制作css3的3d动画——以骰子旋转为例,详解css3动画属性

    首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5   6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...

  6. 从css 3d说到空间坐标轴

    有一次我们说到掷骰子那个游戏,当时是用了一个steps属性+雪碧图来制作帧动画,这当然颇为不错,但其实一开始我想的不是这样的,我想的是用真的3d和动画去做,这个方案涉及到不少空间的知识,今天来给大伙好 ...

  7. 探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题

    今天在写一个小的 CSS Demo,一个关于 3d 球的旋转动画,关于 CSS 3D,少不了会使用下面这几个属性: { transform-style: preserve-3d; perspectiv ...

  8. CSS实现动画特效导航栏

    0 写在前面 今天用纯CSS编写了一种带有特效的导航栏,一方面巩固熟悉了导航栏的一般写法,另一方面练习了CSS3的一些新特性. 1 实现效果 当鼠标划过时,实现了一种动态百叶窗效果. 2 实现细节 2 ...

  9. CSS3中的3D动画实现(钟摆、魔方)--实现代码

    CSS3中的3D动画实现(钟摆.魔方) transition-property 过渡动画属性  all|[attr] transition-duration 过渡时间 transition-delay ...

随机推荐

  1. Sass 的 & 符号(ampersands)

    重复声明 有时您需要击败第三方 CSS 库的声明来获取样式的所有权: .parent.parent {} 这种方式比使用和 ID,内联样式或!important的压倒性弱,并且它可能比使用任意父元素限 ...

  2. WCF 出现System.Core version 2.0.5.0 未能加载问题

    Window server 2008 R2 Enterprise 版本测试: 需要安装Net补丁: NDP40-KB2468871-v2-x64 下载地址 https://www.microsoft. ...

  3. Openstack_单元测试

    目录 目录 单元测试的原理 单元测试的实现 最后 单元测试的原理 单元测试中的单元可以是一个模块文件, 测试的内容就是模块自身的代码(非导入型代码)是否正确执行. 其中包含了测试代码的正反向逻辑是否正 ...

  4. C 语言的函数 - 内存分析

    函数基本概念 Linux 中,函数在内存的代码段(code 区),地址比较靠前. 函数定义 C 语言中,函数有三个要素:入参.返回值.函数名,缺一不可.函数使用前必须先声明,或者在使用之前定义. 函数 ...

  5. Shadow安装

    1.Shadow插件的安装 http://shadow.github.io/ 这是shadow主页的网址,Shadow是一个开源的网络模拟器/仿真器,我们用它模拟Tor网络的运行状况.   1.1安装 ...

  6. ES 集群管理(集群规划、集群搭建、集群管理)

    一.集群规划 搭建一个集群我们需要考虑如下几个问题: 1. 我们需要多大规模的集群? 2. 集群中的节点角色如何分配? 3. 如何避免脑裂问题? 4. 索引应该设置多少个分片? 5. 分片应该设置几个 ...

  7. kettle入门大数据管理工具

    研究 kettle 的使用 大佬博客:https://www.cnblogs.com/mq0036/p/9238646.html 国内镜像下载:http://mirror.bit.edu.cn/pen ...

  8. 【Qt开发】设置中心窗口 setCentralWidget

    http://blog.csdn.net/qter_wd007/article/details/7028920 Qt程序中的主窗口通常具有一个中心窗口部件.从理论上来讲,任何继承自QWidget的类的 ...

  9. Oracle 修改数据文件路径的方法

      1. 关闭数据库,然后启动至mount状态 sqlplus / as sysdba shutdown immediate startup mount 2. 修改物理文件: 我这边将: c:\cwd ...

  10. adb 配置连接

    一. adb环境安装 1.1. windown 驱动安装 1. 下载驱动(ADB Kits):http://adbshell.com/downloads 2. adb 测试 <1>. 解压 ...