本篇文章所说的内容是纯CSS实现3D的代码(正方体、动态立体图片册、平面的星空)，代码都非常详细，有需要的朋友可以看一下。

一、正方体

我认为正方体可以算是3D图像的基础吧，首先正方体是由六个相同的面所组成，其次就需要我们依次构造。(据体构造在代码中)

代码如下：

正方体

.d3{

height: 300px;

width:300px;

perspective: 800px;

margin:140px auto;

border:1px solid #ccc; }

.stage{

height: 300px;

width: 300px;

transform-style: preserve-3d;

position: relative;

transform: rotateX(45deg) rotateY(45deg);

}

.role{

height: 300px;

width: 300px;

position: absolute;

}

.stage{

animation: dong 3s linear infinite;(这是舞台)

}

.stage:hover{

animation: paused;

}

@keyframes dong{(这是使舞台旋转的动画)

from{

transform: rotateX(45deg) rotateY(45deg);

}

to{

transform: rotateX(405deg) rotateY(405deg);

}

}

.di1{(正方体的前面)

background: rgb(21, 163, 52);

transform: translateZ(150px);(沿着z轴向前移动150px)

font-size:100px;

font-family:KaiTi;

text-align: center;

line-height: 300px;

}

.di2{(正方体的后面)

background: blue;

transform: translateZ(-150px) rotateY(180deg);(沿着z轴向前移动150px然后沿着y轴旋转180°*注意顺序哦是先移动后旋转)

font-size:100px;

font-family:KaiTi;

text-align: center;

line-height: 300px;

}

.di3{(正方体的左面)

background: purple;

transform: rotateY(-90deg) translateZ(150px);

font-size:100px;

font-family:KaiTi;

text-align: center;

line-height: 300px;

}

.di4{(正方体的右面)

background: pink;

transform: rotateY(90deg) translateZ(150px);

font-size:100px;

font-family:KaiTi;

text-align: center;

line-height: 300px;

}

.di5{(正方体的上面)

background: red;

transform: rotateX(90deg) translateZ(150px);

font-size:100px;

font-family:KaiTi;

text-align: center;

line-height: 300px;

}

.di6{(正方体的下面)

background: yellow;

transform: rotateX(-90deg) translateZ(150px);

font-size:100px;

font-family:KaiTi;

text-align: center;

line-height: 300px;

}

(将正方体分为六个相同的面)

前
后
左
右
上
下

二、动态立体图片册

将图片册设计成立体3D的效果

利用旋转、移动、倾斜和3D效果让你的图册更加漂亮。

代码如下：(将第一张定好位置后将后面的依次排列)

事例一

body{

height: 100vh;

}

.div {

height: 500px;

width: 800px;

perspective: 800px;

margin: 50px auto;

}

.div1 {

height: 500px;

width: 800px;

transform-style: preserve-3d;

position: relative;

/* transform: rotateY(-10deg); */

}

.div_0{

height:400px;

width:600px;

position: absolute;

margin-top:110px;

margin-left:50px;

}

.div_1{

height:400px;

width:600px;

background: url(../day03/timg.jpg);

background-size: 600px 400px;

border-radius: 20px;

transform-origin: right bottom;

transition: 3s;

}

.div_2{

background: url(../day03/timg1.jpg);

border-radius: 20px;

background-size: 600px 400px;

transform-origin: right bottom;

transform: rotateZ(2deg) translateZ(-20px) translateX(20px) translateY(-20px);

}

.div_2:hover{

transform: rotateZ(0) translateZ(0)translateX(0)translateY(0);

transition: 1s;

}

.div_2:hover~.div_1{

/* transform-origin: right bottom; */

transform: rotateZ(2deg) translateZ(20px) translateX(20px) translateY(-20px);

transition: 1s;

}

/* body:hover .div_1{

opacity: 0;

transition: 3s;

} */

.div_3{

background: url(timg2.jpg);

border-radius: 20px;

background-size: 600px 400px;

transform-origin: right bottom;

transform: rotateZ(4deg)translateZ(-40px)translateX(40px)translateY(-40px);

}

.div_3:hover{

transform: rotateZ(0) translateZ(0)translateX(0)translateY(0);

transition: 1s;

}

.div_4{

background: url(timg4.jpg);

border-radius: 20px;

background-size: 600px 400px;

transform-origin: right bottom;

transform: rotateZ(6deg)translateZ(-60px) translateX(60px)translateY(-60px);

}

.div_4:hover{

transform: rotateZ(0) translateZ(0)translateX(0)translateY(0);

transition: 1s;

}

.div_5{

background: url(timg5.jpg);

border-radius: 20px;

background-size: 600px 400px;

transform-origin: right bottom;

transform: rotateZ(8deg)translateZ(-80px) translateX(80px)translateY(-80px);

}

.div_5:hover{

transform: rotateZ(0) translateZ(0)translateX(0)translateY(0);

transition: 1s;

}

.div_6{

background: url(timg3.jpg) no-repeat;

border-radius: 20px;

background-size: 600px 400px;

transform-origin: right bottom;

transform: rotateZ(10deg)translateZ(-100px) translateX(100px)translateY(-100px);

}

.div_6:hover{

transform: rotateZ(0) translateZ(0)translateX(0)translateY(0);

transition: 1s;

}

三、平面的星空

代码如下：

(由于没有用js所以只有平面的效果了

你掌握好旋转的中心点就很容易了)

太阳系

body {

background: url(timg01.jpg) no-repeat;

background-size: 100%;

}

.box1 {

height: 600px;

width: 600px;

margin: 0 auto;

border: 1px solid #ccc;

border-radius: 50%;

}

.box1_0 {

height: 100px;

width: 100px;

margin: 0 auto;

border: 1px solid white;

border-radius: 50%;

position: absolute;

top: calc(50% - 59px);

left: 322px;

transform-origin: 345.5px;

animation: dong2 5s linear infinite 4s;

}

@keyframes dong2 {

from {

transform: rotate(0)

}

100% {

transform: rotate(360deg);

}

}

.box1_2 {

height: 13px;

width: 13px;

margin: 0 auto;

/* border: 1px solid #ccc; */

border-radius: 50%;

background: white;

position: absolute;

top: calc(50% - 7.5px);

left: 96px;

transform-origin: -45px;

animation: dong3 5.5s linear infinite ;

/* animation-iteration-count: 200; */

}

@keyframes dong3 {

from {

transform: rotate(0);

}

100% {

transform: rotate(360deg);

}

}

.box1_1 {

height: 15px;

width: 15px;

margin: 0 auto;

/* border: 1px solid #ccc; */

border-radius: 50%;

background: rgb(7, 100, 223);

position: absolute;

top: 45px;

left: calc(50% - 16.5px);

}

.box2 {

height: 400px;

width: 400px;

margin: 0 auto;

border: 1px solid #ccc;

border-radius: 50%;

position: absolute;

top: calc(50% - 200px);

left: calc(50% - 200px);

}

.box2_1 {

height: 15px;

width: 15px;

margin: 0 auto;

/* border: 1px solid #ccc; */

border-radius: 50%;

background: rgb(198, 208, 221);

position: absolute;

top: calc(50% - 7.5px);

left: 43px;

transform-origin: 157.5px;

animation: dong1 5s linear infinite .5s;

}

@keyframes dong1 {

from {

transform: rotate(0)

}

100% {

transform: rotate(360deg);

}

}

.box2_2 {

height: 15px;

width: 15px;

margin: 0 auto;

border-radius: 50%;

background: #644e11;

position: absolute;

top: calc(50% - 7.5px);

left: -7px;

transform-origin: 207.5px;

animation: dong 5s linear infinite;

}

@keyframes dong {

from {

transform: rotate(0)

}

100% {

transform: rotate(360deg);

}

}

.box3 {

height: 300px;

width: 300px;

margin: 0 auto;

border: 1px solid #ccc;

border-radius: 50%;

position: absolute;

top: calc(50% - 150px);

left: calc(50% - 150px);

}

.box4 {

height: 30px;

width: 30px;

margin: 0 auto;

border-radius: 50%;

background: orange;

position: absolute;

top: calc(50% - 15px);

left: calc(50% - 15px);

}

.boxli{

height: 900px;

width: 900px;

margin: 0 auto;

border: 1px solid #ccc;

border-radius: 50%;

position: absolute;

top:-120px;

left:calc(50% - 450px);

}

.boxli_1{

height: 15px;

width: 15px;

margin: 0 auto;

border-radius: 50%;

background: rgb(116, 100, 56);

position: absolute;

top:500px;

left:-6px;

transform-origin: 455.5px -38px;

animation: dongli 5s linear infinite;

}

@keyframes dongli {

from {

transform: rotate(0)

}

100% {

transform: rotate(360deg);

}

}

相关推荐：

php立方体相册源码,纯CSS实现3D的代码（正方体、动态立体图片册、平面的星空）...相关推荐

  1. 表白代码抖音很火的卡通H5动态表白源码HTML+CSS，七夕情人节代码，520代码

    作品介绍 查看更多关于 抖音 的文章 很火的卡通H5动态表白源码,搭起来发给你心爱的人向她表白吧 纯html的源码,上传就可以打开使用啦! 用代码编辑器或记事本打开可修改你要表白的内容.名字等 效果图 ...

  2. html 实现3d效果代码,纯CSS实现3D的代码

    一.正方体 我认为正方体可以算是3D图像的基础吧,首先正方体是由六个相同的面所组成,其次就需要我们依次构造.(据体构造在代码中) 代码如下: 正方体 .d3{ height:300px; width: ...

  3. HTML网页设计结课大作业~仿凡客服装商城主页纯HTML模板源码(HTML+CSS+JS)

    HTML网页设计结课作业~服装商城主页纯HTML模板源码(HTML+CSS+JS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多 ...

  4. 傻瓜一键制作html,营销号生成器源码(纯HTML+CSS+JS)

    营销号生成器源码(纯HTML+CSS+JS),最近很火的营销号生成器相信很多人都不陌生,它能帮您生成一段非常标准的小编文案,并且内容废话极多,一般用来调侃使用.本次带来营销号生成器源码资源下载,包含了 ...

  5. HTML期末大作业~ 明星林依晨（7页）带留言 学生网页设计作业源码(HTML+CSS+JS)

    HTML期末大作业~ 明星林依晨(7页)带留言 学生网页设计作业源码(HTML+CSS+JS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求 ...

  6. HTML期末大作业~简单的程序员个人博客网站模板源码(HTML+CSS)~个人主页博客web网页设计制作~HTML简单个人网页制作~Web大学生网页成品...

    HTML期末大作业~ 简单的程序员个人博客网站模板源码(HTML+CSS)~学生HTML个人网页作业作品下载 ~个人主页博客网页设计制作 ~大学生个人网站作业模板 ~简单个人网页制作 临近期末, 你还 ...

  7. HTML期末大作业~ 蓝色版爱宠之家(5个页面)带留言板宠物 学生网页设计作业源码(HTML+CSS+JS)

    HTML期末大作业~ 蓝色版爱宠之家(5个页面)带留言板宠物 学生网页设计作业源码(HTML+CSS+JS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...

  8. HTML期末大作业~ 海贼王6页代码质量好~ 学生网页设计作业源码(HTML+CSS+JS)

    HTML期末大作业~ 海贼王6页代码质量好~ 学生网页设计作业源码(HTML+CSS+JS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的 ...

  9. HTML期末大作业~ 大话西游之大圣娶亲电影4页面 ~学生网页设计作业源码(HTML+CSS+JS)

    HTML期末大作业~ 大话西游之大圣娶亲电影4页面 ~学生网页设计作业源码(HTML+CSS+JS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网 ...

最新文章

  1. 推荐几个开源类库，超好用，远离996！
  2. re2c编译选项的说明
  3. SupeSite后台添加新闻增加【预览】功能
  4. matlab for and if command
  5. 信号的基本概念以及信号的产生
  6. Linux系统NFS什么意思,挂载NFS到底是什么概念
  7. 三种背包问题的例题（各一道）
  8. python3有什么用_Python 3.9的到来到底是意味着什么
  9. 用友NC cloud ncc nccloud 补丁下载
  10. Eclipse翻译插件
  11. Go 依赖管理工具 Dep 的安装及配置
  12. Oracle (temporary tablespace)临时表空间说明
  13. 爱心版生日快乐了解一下(肝了一个晚上)
  14. 社区计算机知识,社区公共基础知识备考指导——计算机知识
  15. Android自定义安全键盘
  16. 记一次失败的《将视频中的音频转换成文字》的经历
  17. java基础小记_[Java教程]Java基础学习小记
  18. 新版药品目录即将出炉 儿童药研发驶入快车道
  19. 丢包、拆包、粘包的原因及解决办法
  20. Linux下的文件读写

热门文章

  1. JavaScript实现手机拍摄图片的旋转、压缩
  2. Android logo图标的尺寸
  3. 阿雪的学习记录|解决Linux下PPPoE拨号上网不稳定的问题
  4. 用EXCEL分析《亚马逊智能产品评论》
  5. 笨方法学python 习题14
  6. 二级菜单（隐藏显示）
  7. python异常处理机制例题_16.python异常处理
  8. android 语音识别文字
  9. [引擎搭建记录] 时间性抗锯齿(TAA)
  10. Elasticsearch教程 | 第三篇：审计设置