CSS3 3D案例的总结

如果要说是3D的基础概念，首先我就来说一说rotateX()、rotateY()、rotateZ()这几个属性

rotateX():对应的是3D模型中的X轴上的旋转，传入的参数如:rotateX(45deg)表示的是页面绕X轴顺时针旋转45度

rotateY():对应的是3D模型中的Y轴上的旋转，传入的参数如:rotateY(45deg)表示的是页面绕Y轴顺时针旋转45度

rotateZ():对应的是3D模型中的Z轴上的旋转，传入的参数如:rotateZ(45deg)表示的是页面绕Z轴顺时针旋转45度(必须提到的是Z轴是相对自己的正面)

请看下图:

这就是对3D的基础，明白这三点做起来会很简单。

perspective

根据我个人对这个属性的理解，这个属性的功能就有点像把平行光设置为聚焦光一样，我们可以知道这个属性相当于将默认的平行光置换成焦点光，如果是像perspective:500px，这个我们可以认为是光源离物体的距离是500px，这个数值如果是越大的话，那么等一下的物体呈现就会越小，反之越大。
下面给大家呈现几个示例。

1.反转

效果展示:

HTML:
<body><div id="cont"><div id="box"></div><div id="box1"><img src="data:images/lunbo2.jpg"></div></div>
</body>
css:
body{background: rgb(88, 71, 71);transform-style: preserve-3d;perspective: 800px;
}
/*添加3D效果和视距*/
#cont{width: 300px;height: 300px;transform-style: preserve-3d;margin: 100px auto;transform: rotateY(0deg);transition: all 2s;
}
/*设置3D，让他在2秒内执行完*/
#cont:hover{transform: rotateY(180deg);
}
/*设置hover时间*/
#box{width: 300px;height: 300px;line-height: 300px;background: url(../images/lunbo3.jpg)no-repeat;background-size:100% 100%;margin: 0 auto;font-size: 150px;text-align: center;color: #fff;position: absolute;backface-visibility: hidden;
}
/*这个是正面*/
#box1{width: 300px;line-height: 300px;transform: rotateY(-180deg);
}
/*这个是反面*/
#box1 img{width: 100%;height: 300px;
}
这就是旋转，是沿着Y轴旋转了180度。接下来就结合一下上面所提到的一个坐标轴的相对位置问题来接一个例子。

2.正方体

效果展示:

HTML:
<body><div id="box"><div id="cont"class="cont"><div class="mian"><img src="data:images/tp.jpg"></div><div class="mian"><img src="data:images/tp2.jpg"></div><div class="mian"><img src="data:images/tp3.jpg"></div><div class="mian"><img src="data:images/tp4.jpg"></div><div class="mian"><img src="data:images/tp5.jpg"></div><div class="mian"><img src="data:images/tp6.jpg"></div></div></div>
</body>

CSS:

body{background: rgb(125, 102, 119);
}
#box{transform-style: preserve-3d;perspective: 800px;
}
/*添加3D效果和视距*/
.cont{width: 200px;height: 200px;margin: 150px auto;position: relative;transform-style: preserve-3d;/*添加3D*/transform: rotateX(10deg) rotateY(10deg);animation:ziz 10s infinite;/*绑定事件，让他在10秒内执行完*/
}
@keyframes ziz{0%{transform:rotate(0deg);}50%{transform:rotateX(180deg);}70%{transform: rotateY(180deg);}100%{transform:rotateX(0deg);}
}
/*事件*/
.cont img{width: 200px;height: 200px;
}
.mian{width: 200px;height: 200px;position: absolute;
}
/*下面设置的6个面，让它们以不同的角度选择拼接*/
.mian:nth-child(1){background: blue;transform: rotateX(90deg) translateZ(100px);
}
.mian:nth-child(2){background: rgb(32, 193, 40);transform: rotateX(-90deg) translateZ(100px);
}
.mian:nth-child(3){background: red;transform: rotateY(-90deg) translateZ(100px);
}
.mian:nth-child(4){background: yellow;transform: rotateY(90deg) translateZ(100px);
}
.mian:nth-child(5){background: #3ce8af;transform:translateZ(100px);
}
.mian:nth-child(6){background: #e476a3;transform:translateZ(-100px) rotateY(180deg);
}
首先我给它们都设置了 3D 空间，perspective这个是所谓的视距，接下来我给正方形 设置了6个面，各让它们沿着 rotateX rotateY translateZ 进行调整，然后组成一个现在所看到的3D 正方体。

3.旋转

效果展示:

HTML:
<body><div class="cont" id="xj"><div class="box" id="box"><div class="mian"><img src="data:images/lunbo1.jpg"></div><div class="mian"><img src="data:images/lunbo2.jpg"></div><div class="mian"><img src="data:images/lunbo3.jpg"></div><div class="mian"><img src="data:images/lunbo1.jpg"></div><div class="mian"><img src="data:images/lunbo2.jpg"></div><div class="mian"><img src="data:images/lunbo3.jpg"></div><div class="mian"><img src="data:images/lunbo4.jpg"></div><div class="mian"><img src="data:images/lunbo3.jpg"></div><div class="mian"><img src="data:images/lunbo2.jpg"></div></div></div>
</body>

CSS:

body{background: rgb(123, 235, 238);
}
.cont{transform-style: preserve-3d;perspective: 800px;
}
/*添加3D和视距*/
.box{width: 200px;height: 200px;margin: 100px auto;position: relative;transform-style: preserve-3d;/*添加3D*/transform: rotateX(-10deg) rotateY(0deg) translateZ(-300px);transform-origin: center center -300px; /*设置眼睛的位置*/line-height: 200px;transition:all 1s;/*在1秒内执行完*/
}
.box img{width: 100%;height: 100%;
}
.mian{width:200px;height: 200px;position: absolute;background-color: black;font-size: 100px;color: #fff;text-align: center;}
/*下面是9个div让它们rotateY的角度拼接成一个多边形*/
.mian:nth-child(1){transform: rotateY(0deg) translateZ(275px);
}
.mian:nth-child(2){transform: rotateY(40deg) translateZ(275px);
}
.mian:nth-child(3){transform: rotateY(80deg) translateZ(275px);
}
.mian:nth-child(4){transform: rotateY(120deg) translateZ(275px);
}
.mian:nth-child(5){transform: rotateY(160deg) translateZ(275px);
}
.mian:nth-child(6){transform: rotateY(200deg) translateZ(275px);
}
.mian:nth-child(7){transform: rotateY(240deg) translateZ(275px);
}
.mian:nth-child(8){transform: rotateY(280deg) translateZ(275px);
}
.mian:nth-child(9){transform: rotateY(320deg) translateZ(275px);
}
这个是根据上面的排版一样也是调整了他们的 rotateX rotateY translateZ 。然后加入了JS里面的鼠标点击事件，让它们沿着X轴旋转。

4.卡片翻阅

效果展示：

HTML:
<body><div id="box"><div id="box1"><div class="hz"><img src="data:images/tp.jpg"></div><div class="hz"><img src="data:images/tp2.jpg"></div><div class="hz"><img src="data:images/tp3.jpg"></div><div class="hz"><img src="data:images/tp4.jpg"></div><div class="hz"><img src="data:images/tp6.jpg"></div><div class="hz"><img src="data:images/tp5.jpg"></div></div></div><div class="btn"><input type="button" value="下" id="btn"><input type="button" value="上" id="up"></div>
</body>

CSS:

body{background: rgb(197, 231, 143);
}
#box{transform-style: preserve-3d;perspective: 800px;
}
/*添加3D和视距*/
#box1{width: 300px;height: 300px;margin: 100px auto;position: relative;text-align: center;line-height: 300px;font: 150px/2 Microsot Yahei;color: #fff;transform-style: preserve-3d;/*添加3D*/
}
#box1 img{width: 100%;height: 100%;
}
.hz{width: 100%;height: 100%;background: red;position: absolute;transform-origin: bottom;/*设置的眼睛在下面*/transform: rotateX(0deg);transition: all 2s;/*设置时间*/backface-visibility: hidden;/*隐藏背面*/
}
首先让它rotateX(-90deg)以后，貌似是隐藏了，实际上是和人的视觉平行了，比方说一个很扁的物品，当和人的视觉平行以后，很难看到存在的东西。

5.魔方

效果展示：

HTML:
<body><div id="box"></div>
</body>
var box=document.getElementById('box');
var geshu=6;//渲染的个数
var xr='<div class="box1"><div class="mian"></div><div class="mian"></div><div class="mian"></div><div class="mian"></div><div class="mian"></div><div class="mian"></div></div>';
var str='';
for (var i = 0; i < geshu; i++) {str+=xr;
}
box.innerHTML=str;
//渲染完毕
var wutai=box.getElementsByClassName('box1');
console.log(wutai);
var cishu=0;
box.onclick=function() {cishu++;var jiaodu=cishu*90;for (var i = 0; i < geshu; i++) {wutai[i].style="transition:transform 1s "+100*i+"ms;transform:rotateX("+jiaodu+"deg)";}
}
CSS:
body{background: rgb(164, 239, 241);
}
#box{width: 600px;height: 250px;margin: 150px auto;perspective: 800px;perspective-origin: 500px;
}
.box1{width: 100px;height: 100%;float: left;position: relative;transform-style: preserve-3d;margin-left: -1px;
}
/*这几个是让背景图片拼接，以它们的宽来定义的，background-position这个属性可以移动背景图片的位置*/
.box1:nth-child(2)>.mian{background-position: -100px 0;
}
.box1:nth-child(3)>.mian{background-position: -200px 0;
}
.box1:nth-child(4)>.mian{background-position: -300px 0;
}
.box1:nth-child(5)>.mian{background-position: -400px 0;
}
.box1:nth-child(6)>.mian{background-position: -500px 0;
}
.mian{width: 100%;height: 100%;position: absolute;
}
/*下面是设置的6个div给它们加了背景图片*/
.mian:nth-child(1){transform: translateZ(125px);background: url(../images/lunbo1.jpg) no-repeat;background-size: 600px 100%;
}
.mian:nth-child(2){transform: translateZ(-125px);background: url(../images/lunbo2.jpg) no-repeat;background-size: 600px 100%;
}
.mian:nth-child(3){width: 250px;transform: rotateY(-90deg) translateZ(125px);background-color: black;}
.mian:nth-child(4){width: 250px;transform: rotateY(90deg) translateZ(-25px);background-color: black;}
.mian:nth-child(5){transform: rotateX(90deg) translateZ(125px);background: url(../images/lunbo3.jpg) no-repeat;background-size: 600px 100%;
}
.mian:nth-child(6){transform: rotateX(-90deg) translateZ(125px);background: url(../images/lunbo4.jpg) no-repeat;background-size: 600px 100%;
}
看起来很炫是不是，这个其实的制作原理就是按照我在上面提到的这些属性去制作的，首先我们分析一下，在创建这个的时候，第一步我们要加入视距，然后是添加一个3D的舞台，接着是把这些风景的图片边缘相接，最后在这些图片的每个舞台定义一个动画，就是在鼠标点击的时候触发的动作，这样这个就制作完成了，在这个例子中图片的尺寸最好要相同。

总结：

在学习的这段时间里，我对css3 有了更深刻的理解，对于transform的这个属性来说，它是根据你的想法去改变的。但是必须提到的一点是对于3D空间的理解，他可以让你看到你想要的结果，总而言之我们要实打实的学好每一个属性。

转载于:https://www.cnblogs.com/niuyanan/p/6385811.html

CSS3 3D的总结（初学者易懂）相关推荐

  1. 8款帅酷的HTML5/CSS3 3D动画、图片、菜单应用

    今天要给大家分享8款帅酷的HTML5/CSS3应用,它们中包括很酷的HTML5 3D动画应用,也包括实用的CSS3图片.菜单.进度条等插件,一起来看看吧. 1.HTML5 Canvas火焰燃烧动画 如 ...

  2. [应用][js+css3]3D盒子导航[PC端]

    CSS3构建的3D盒子之导航应用 1.在用css3构建的盒子表面,放上iframe,来加载导航页面. 2.鼠标左键按下移动可旋转盒子,寻找想要的网址. 3.左键单机盒子表面,将全屏现实所点盒子表面的网 ...

  3. 7款外观迷人的HTML5/CSS3 3D特效按钮特效

    下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家. 1.CSS3超酷3D弹性按钮 按钮实现非常简单 之前我们分享过几款不错的CSS3 3D立体按钮,比如 ...

  4. css3轮播不用jpuery_js和CSS3 3D轮播图

    这是一款js和CSS3 3D轮播图.这组3D轮播图中,共演示了6种轮播图效果.这些3D轮播图都是通过简单的JS代码配合CSS3来完成的. 使用方法 HTML结构 以8张图片的3D轮播图为例,它的基本H ...

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

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

  6. CSS3 3D transform变换

    transform的坐标是需要了解的特性. 我们的rotateX,rotateY,rotateZ,和translateX,translateY等都是基于相同的坐标系来定位的. 3D的坐标如下入所示: ...

  7. （28）css3 3D转换

    transform 属性不止能实现 2D 转换,也可以制作 3D 立体转换效果,比普通的 x.y 轴组成的平面效果多了一条 z 轴,如下图: 一.透视 电脑显示屏是一个 2D 平面,图像之所以具有立体 ...

  8. html3d转换,CSS3 3D 转换

    # CSS3 3D 转换 ## 3D 转换 CSS3 允许您使用 3D 转换来对元素进行格式化. 在本章中,您将学到其中的一些 3D 转换方法: * rotateX() * rotateY() 点击下 ...

  9. html控制弯曲图,html – CSS3 3D弯曲视角

    CSS3 3D变换动画非常棒.我想知道是否有办法让某些东西弯曲. 这个例子翻转了(纸质)div,但是动画看起来很僵硬,因为实际上,当你翻动纸张时,它会弯曲一点. 那么我忽略的任何属性,或者是一个让它看 ...

最新文章

  1. 从中科院到BAT，如何准备秋招那件事儿（附B站录播）
  2. Java基础教程：反射基础
  3. leetcode--130. 被围绕的区域
  4. SAP Spartacus和product相关的标准normalizer
  5. C# 打印PDF文档的10种方法
  6. c语言有趣代码_为什么C语言永远不会过时？
  7. Fatal Error[Pe1696]：cannot open source file “sys.h”
  8. Redis的发布订阅（消息队列，比如ActiveMQ，一方得到数据后，多方得到信息）
  9. 07-OSPF区域类型--NSSA区域/完全NSSA区域
  10. xml模块、项目开发过程
  11. SQL基础面试题（五）
  12. 8051系列单片机软件精确延时研究（二）
  13. count是java关键字吗_countinue关键字和break关键字与java基本格式
  14. react仿钉钉流程图-审批工作流
  15. BZOJ1103 大都市 DFS序 树状数组维护差分数组
  16. 我的所有优质博客全部开源啦（我自己原创的《ACM模板》《算法全家桶》《算法竞赛中的初等数论》 PDF免费下载）
  17. Leetcode力扣 MySQL数据库 1264 页面推荐
  18. 2018华为实习生招聘（软件）
  19. Reds3配置文件详解
  20. 百胜中国2020年第三季度总收入为23.5亿美元，同比增加1%

热门文章

  1. 深入 Nginx 之架构篇
  2. 大数据处理平台与案例
  3. TiDB 在威锐达 WindRDS 远程诊断及运维中心的应用
  4. Python OpenCV实例：图像重映射
  5. mysql之 mysql 5.6不停机主主搭建（活跃双主基于日志点复制）
  6. BZOJ 2055: 80人环游世界 [上下界费用流]
  7. 为什么要重写hashcode()方法
  8. 【Cocos2d入门教程二】Cocos2d-x基础概念
  9. 《编写有效用例》导读书评——“Jolt大奖精选丛书”有奖征文
  10. 产品设计体会（1001）初探用户需求