教你使用html+css制作一个3D立体相册
目录
- 前言
- 一、先看效果
- 二、实现步骤
- 总结
前言
用css的transform属性做一个3D相册~~~
值translate表示偏移；
scale表示缩放；
rotate就是转动。
一、先看效果
二、实现步骤
1.我们知道一个正方体有6个面，所以定义一个父亲元素然后定义6个子元素作为6个面。每个面放一张图片。里面q1表示前面，h2表示后面，以此类推，就是首拼音。
<div class="baba">
<div class="q1"> <img src="3d/1q.png"> </div>
<div class="h2"> <img src="3d/2h.png"> </div>
<div class="z3"> <img src="3d/3z.png"> </div>
<div class="y4"> <img src="3d/4y.png"> </div>
<div class="s5"> <img src="3d/5s.png"> </div>
<div class="x6"> <img src="3d/6x.png"> </div>
</div>
2.让父元素定位，设立方体长宽，然后必须添加属性transform-style: preserve-3d;
.baba{
position: relative;
width: 300px;
height: 300px;
transform-style: preserve-3d;
}
3.让子元素和图片跟父元素一样长宽。让它有点透明度。
.baba div{
position: absolute;
width: 100%;
height: 100%;
opacity: 0.8;
}
.baba img{
width: 100%;
height: 100%;
}
4.重要一步，给6个面设置位置。
.q1{
transform: translateZ(150px);
}
.h2{
transform: rotateY(180deg) translateZ(150px);
}
.z3{
transform: rotateY(-90deg) translateZ(150px);
}
.y4{
transform: rotateY(90deg) translateZ(150px);
}
.s5{
transform: rotateX(90deg) translateZ(150px);
}
.x6{
transform: rotateX(-90deg) translateZ(150px);
}
5.这样立方体就设置好了，不过我们看不出来，所以让立方体转起来。给父元素添加animation属性
.baba{
position: relative;
width: 300px;
height: 300px;
transform-style: preserve-3d;
animation: zuan 6s linear alternate infinite;
}
@keyframes zuan{
0%,5%{
transform: rotateY(90deg);
}
20%,25%{
transform: rotateY(180deg);
}
40%,45%{
transform: rotateY(270deg);
}
60%,65%{
transform: rotateX(-90deg);
}
80%,85%{
transform: rotateX(0deg);
}
95%,100%{
transform: rotateX(90deg);
}
}
完整代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(circle, #e4e7e4, #111111);
}
.baba{
position: relative;
width: 300px;
height: 300px;
transform-style: preserve-3d;
animation: zuan 6s linear alternate infinite;
}
.baba div{
position: absolute;
width: 100%;
height: 100%;
opacity: 0.8;
}
.baba img{
width: 100%;
height: 100%;
}
.q1{
transform: translateZ(150px);
}
.h2{
transform: rotateY(180deg) translateZ(150px);
}
.z3{
transform: rotateY(-90deg) translateZ(150px);
}
.y4{
transform: rotateY(90deg) translateZ(150px);
}
.s5{
transform: rotateX(90deg) translateZ(150px);
}
.x6{
transform: rotateX(-90deg) translateZ(150px);
}
@keyframes zuan{
0%,5%{
transform: rotateY(90deg);
}
20%,25%{
transform: rotateY(180deg);
}
40%,45%{
transform: rotateY(270deg);
}
60%,65%{
transform: rotateX(-90deg);
}
80%,85%{
transform: rotateX(0deg);
}
95%,100%{
transform: rotateX(90deg);
}
}
</style>
</head>
<body>
<div class="baba">
<div class="q1"> <img src="3d/1q.png"> </div>
<div class="h2"> <img src="3d/2h.png"> </div>
<div class="z3"> <img src="3d/3z.png"> </div>
<div class="y4"> <img src="3d/4y.png"> </div>
<div class="s5"> <img src="3d/5s.png"> </div>
<div class="x6"> <img src="3d/6x.png"> </div>
</div>
</body>
</html>
总结
3D旋转立方体相册做好了~~~~
到此这篇关于教你使用html+css制作一个3D立体相册的文章就介绍到这了,更多相关html+css制作3D立体相册内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
前端html+css实现动态生日快乐代码
生日送什么礼物总是要花一番心思,别出心裁不落俗套,什么礼物才能让那一个她开心呢?来看看前端大大用html+css实现动态生日快乐代码吧,亲测可用. <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Happy Birthday!</title> <style> @import url(&quo
-
使用html+css制作一个发光立方体特效
目录 一.话不多,看效果 二.实现(附完整代码) 1.定义标签: 2.定义外层盒子css: 3.定义盒子6个面分别的样式: 一.话不多,看效果 二.实现(附完整代码) 1.定义标签: <div class="container"> <div class="q1"></div> <div class="h2"></div> <div class="z3">&
-
使用html+css+js实现导航栏滚动渐变效果
目录 实现: 1.定义导航栏的文字标签: 2.导航栏整体的样式: 3.北极光这个logo的样式: 4.给北极光logo定位一个图片在文字左边: 5.右边导航标签的一些样式,样式等都不做详细说明了,毕竟每个人的都不一样~: 6.当页面有滚动后导航栏的样式,padding上下变小,字体颜色变,有了蓝背景色: 7.简单js,实现部分: 第一种: 第二种:直接这样: 完整代码: 先看效果: 实现: 1.定义导航栏的文字标签: <div class="tou"> <sapn c
-
html+css+js实现简易版ChatGPT聊天机器人
OpenAI的一款聊天机器人模型ChatGPT爆火,本篇文章用一百行html+css+js代码给大家制作一款简易的聊天机器人. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1
-
5分钟教你学会超简单的html+css魔幻霓虹灯文字特效
目录 实现过程(完整源码在最后): 1. 定义h3标签: 2. 给个body背景色: 3. 设置h3基本样式: 4.定义动画,就是设置不同时间段显示不同颜色等实现闪烁霓虹灯效果~时间可以自己调自己要的效果: 完整源码: 话不多,先看效果: 今天继续分享简单但有趣的CSS创意特效~这个效果很简单看一分钟就明白了~初学前端的小伙伴们拿来练手是很不错的~ 实现过程(完整源码在最后): 1. 定义h3标签: <h3>Aurora Borealis night</h3> 2. 给个body背
-
教你使用html+css制作一个3D立体相册
目录 前言 一.先看效果 二.实现步骤 总结 前言 用css的transform属性做一个3D相册~~~值translate表示偏移:scale表示缩放:rotate就是转动. 一.先看效果 二.实现步骤 1.我们知道一个正方体有6个面,所以定义一个父亲元素然后定义6个子元素作为6个面.每个面放一张图片.里面q1表示前面,h2表示后面,以此类推,就是首拼音. <div class="baba"> <div class="q1"> <im
-
使用Three.js制作一个3D奖牌页面
目录 背景 效果 实现 引入资源 场景初始化 光照效果 Three.js 提供的光源 添加网格和地面 创建奖牌 奖牌UI素材生成 Three.js 中的贴图 MeshPhysicalMaterial 物理材质 特殊属性 加载1000+文字模型 补间动画 动画更新 礼花动画 总结 背景 本文使用 React + Three.js 技术栈,实现粉丝突破1000的3D纪念页面,包含的主要知识点包括:Three.js 提供的光源.DirectionLight 平行光.HemisphereLight 半球
-
基于Three.js制作一个3D中国地图
目录 1.使用geoJson绘制3d地图 1.1 创建场景相关 1.2 根据json绘制地图 2.增加光照 3.增加阴影模糊 4.增加鼠标事件 5.渲染 6.动画效果 不想看繁琐步骤的,可以直接去github下载项目,如果可以顺便来个star哈哈 本项目使用vue-cli创建,但不影响使用,主要绘制都已封装成类 1.使用geoJson绘制3d地图 1.1 创建场景相关 // 创建webGL渲染器 this.renderer = new THREE.WebGLRenderer( { antiali
-
利用three.js画一个3D立体的正方体示例代码
简介 three.js 是一款WebGL框架,WebGL可以让我们在canvas上实现3D效果.实现3D效果在国内来说还算是比较新的东西,可供查阅的资料也不多.这篇文章仅是一个入门篇,介绍如何绘制一个3D正方体. Three.js中的基本概念 Three.js包含3个基本概念:场景(Scene).相机(Camera)和渲染器(Renderer). 场景就是需要绘制的对象,相机代表取景的视角,渲染器是绘制的载体(可以挂靠到浏览器的DOM元素中), 也就是我们通过相机拍摄场景然后绘制到目标介质中去.
-
利用CSS制作3D动画
目录 CSS 3D 基础知识 使用 transform-style 启用 3D 模式 利用 perspective & perspective-origin 设置 3D视距,实现透视/景深效果 通过绘制 Webpack Logo 熟悉 CSS 3D 实现文字的 3D 效果 3D 氖灯文字效果 利用 CSS 3D 配合 translateZ 实现真正的文字 3D 效果 利用距离.角度及光影构建不一样的 3D 效果 3D 计数器 空间效果 空间 3D 效果热身 利用图片素材 3D 无限延伸视角动画
-
利用JavaScript制作一个酷炫的3D图片演示
目录 前言 一.页面特效效果展示 二.功能描述 三.功能实现 前言 对于学前端的小伙伴来说,吸引你们入坑的大都是一些炫酷的页面.但往往那些页面的源代码对初学的伙伴们都不太友好.今天给大家分享一个代码简单.适合初学者.高级感炫酷感爆棚的特效页面(有npy的快乐加倍!). 一.页面特效效果展示 注:上述效果图只是部分效果,原谅我还没有学会自制gif图! 二.功能描述 1.打开页面,所有图片会自动转动 2.图片的大小和间隔可随鼠标滚轮滚动而改变 3.鼠标按住页面任意位置,拖动光标,页面可随之旋转 三.
-
JS+CSS实现一个气泡提示框
分享一个气泡提示框,练习的技术有:(1)JS响应鼠标的事件:(2)纯CSS制作三角形. 效果这样: 这是html: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>气泡对话框</title> <script src="myBubbleTooltip.js"></script>
-
ASP.NET中制作各种3D图表的方法
前言 大家都知道通过图表控件,我们即能表示数据又能比较各种图表的数据,例如比较去年和今年的收入.图表的类型也有很多,如柱状图.折线图.条形图.组合图等等. 首先,我将展示如何绘制出一个简单的图表. 简单图表的步骤 步骤1 新建一个"ASP.NET Empty Web Site". 步骤2 在Solution Explorer 中添加新项目,添加new form. 步骤3 工具栏-标准-项目.我们会看到在.Net Framework Component.中有两个图表选项,打勾并保存..N
-
CSS制作树状目录教程
本篇详细介绍如何利用CSS能方便地控制对象的"显示"和"隐藏"属性原理,制作一个树状目录,用CSS制作这样的树状目录,方法简单,代码也比较少,所以把它写出来,给网友们共亨,以便在需要的时候也可动手做一个. 索易电子杂志大多采用树状目录,当鼠标点击主目录时,展开子目录:当再次点击主目录时,则关闭子目录.显得简捷明快,朴实无华. 制作这种树状目录的方法较多,最近我先看下面的示例:当用鼠标在主目录上点一下,就下拉出相应的子目录,再点一下,又恢复原状,其效果与索易电子杂志上