教你用 CSS 实现超真实的 3D 相册,让你的照片立体感 UPUP
前言
现如今网页越来越趋近于动画,相信大家平时浏览网页或多或少都能看到一些动画效果,今天我们来做一个有意思的动画效果,通过 css3 实现 3d 效果的立方体相册,下面一起看看吧。
实现思路
- 首先我们要确定好
html
的结构以及要使用的标签; - 当我们搭建好
html
的结构后,就要想到怎么去实现立体的效果; - 最后就是如何实现旋转以及鼠标触摸时变换的效果。
html 布局
<div class="parentBox"><div class="contantBox"><div class="outerBox"><!--======================= 外部正方体 =======================--><!-- 外前图 --><div class="frontImgBox"><img src="../assets/tu1.jpg" /></div><!-- 外后图 --><div class="queenImgBox"><img src="../assets/tu2.jpg" /></div><!-- 外左图 --><div class="liftImgBox"><img src="../assets/tu3.jpg" /></div><!-- 外右图 --><div class="rightImgBox"><img src="../assets/tu4.jpg" /></div><!-- 外上图 --><div class="topImgBox"><img src="../assets/tu5.jpg" /></div><!-- 外下图 --><div class="bottomImgBox"><img src="../assets/tu6.jpg" /></div><!--======================= 内部正方体 =======================--><!-- 内前图 --><p class="inFrontImgBox"><img src="../assets/tu7.jpg" /></p><!-- 内后图 --><p class="inqueenImgBox"><img src="../assets/tu8.jpg" /></p><!-- 内左图 --><p class="inLeftImgBox"><img src="../assets/tu9.jpg" /></p><!-- 内右图 --><p class="inRightImgBox"><img src="../assets/tu10.jpg" /></p><!-- 内上图 --><p class="inTopImgBox"><img src="../assets/tu11.jpg" /></p><!-- 内下图 --><p class="inBottomImgBox"><img src="../assets/tu12.jpg" /></p></div></div>
</div>
立体的效果
立体效果的核心就是运用 css3
中的 transform-style
属性。
transform-style 属性
transform-style
属性用来指定嵌套元素是怎样在三维空间中呈现。当值为 flat
时,表示所有子元素在 2D
平面呈现;值为 preserve-3d
时,表示所有子元素在 3D
空间中呈现。
属性值 | 描述 |
---|---|
flat(默认值) | 将设置元素的子元素位于该元素的平面中 |
preserve-3d | 将指示元素的子元素应位于 3D 空间中 |
注意:
- 该属性必须与
transform
属性一同使用,否则没效果; - 该属性不能被子元素继承;
- 该属性的效果作用于子元素,不作用于自身。
旋转和变换的效果
旋转及变换的效果我们则需要通过 animation
属性和 hover
伪类属性的配合来实现。
旋转核心代码
.outerBox{-webkit-animation: rotate 10s infinite;}@-webkit-keyframes rotate {from {transform: rotateX(0deg) rotateY(0deg);}to {transform: rotateX(360deg) rotateY(360deg);}}
变换核心代码
.outerBox:hover .frontImgBox {transform: rotateY(0deg) translateZ(200px);
}
.outerBox:hover .queenImgBox {transform: translateZ(-200px) rotateY(180deg);
}
.outerBox:hover .liftImgBox {transform: rotateY(90deg) translateZ(200px);
}
.outerBox:hover .rightImgBox {transform: rotateY(-90deg) translateZ(200px);
}
.outerBox:hover .topImgBox {transform: rotateX(90deg) translateZ(200px);
}
.outerBox:hover .bottomImgBox {transform: rotateX(-90deg) translateZ(200px);
}
到这里为止,我们已经将整个功能的核心要点分析完毕,话不多说,下面一起来看完整的源码⤵。
完整源码
<template><div class="parentBox"><div class="contantBox"><div class="outerBox"><!--======================= 外部正方体 =======================--><!-- 外前图 --><div class="frontImgBox"><img src="../assets/tu1.jpg" /></div><!-- 外后图 --><div class="queenImgBox"><img src="../assets/tu2.jpg" /></div><!-- 外左图 --><div class="liftImgBox"><img src="../assets/tu3.jpg" /></div><!-- 外右图 --><div class="rightImgBox"><img src="../assets/tu4.jpg" /></div><!-- 外上图 --><div class="topImgBox"><img src="../assets/tu5.jpg" /></div><!-- 外下图 --><div class="bottomImgBox"><img src="../assets/tu6.jpg" /></div><!--======================= 内部正方体 =======================--><!-- 内前图 --><p class="inFrontImgBox"><img src="../assets/tu7.jpg" /></p><!-- 内后图 --><p class="inqueenImgBox"><img src="../assets/tu8.jpg" /></p><!-- 内左图 --><p class="inLeftImgBox"><img src="../assets/tu9.jpg" /></p><!-- 内右图 --><p class="inRightImgBox"><img src="../assets/tu10.jpg" /></p><!-- 内上图 --><p class="inTopImgBox"><img src="../assets/tu11.jpg" /></p><!-- 内下图 --><p class="inBottomImgBox"><img src="../assets/tu12.jpg" /></p></div></div></div>
</template>
<style lang="less" scoped>
.parentBox {height: 100%;background: rgb(31, 31, 31);padding: 200px;.contantBox {width: 200px;height: 200px;margin: 0px auto;position: relative;.outerBox {width: 200px;height: 200px;margin: 0 auto;transform-style: preserve-3d;transform: rotateX(-30deg) rotateY(-80deg);-webkit-animation: rotate 10s infinite;animation-timing-function: linear; //匀速// 外部正反体样式div {position: absolute;width: 200px;height: 200px;opacity: 0.75;transition: all 0.4s;img {width: 100%;height: 100%;}}.frontImgBox {transform: rotateY(0deg) translateZ(100px);}.queenImgBox {transform: translateZ(-100px) rotateY(180deg);}.liftImgBox {transform: rotateY(90deg) translateZ(100px);}.rightImgBox {transform: rotateY(-90deg) translateZ(100px);}.topImgBox {transform: rotateX(90deg) translateZ(100px);}.bottomImgBox {transform: rotateX(-90deg) translateZ(100px);}@-webkit-keyframes rotate {from {transform: rotateX(0deg) rotateY(0deg);}to {transform: rotateX(360deg) rotateY(360deg);}}// 内部正方体样式p {display: bloack;width: 100px;height: 100px;position: absolute;top: 50px;left: 50px;img {width: 100%;height: 100%;}}.inFrontImgBox {transform: rotateY(0deg) translateZ(50px);}.inqueenImgBox {transform: translateZ(-50px) rotateY(180deg);}.inLeftImgBox {transform: rotateY(90deg) translateZ(50px);}.inRightImgBox {transform: rotateY(-90deg) translateZ(50px);}.inTopImgBox {transform: rotateX(90deg) translateZ(50px);}.inBottomImgBox {transform: rotateX(-90deg) translateZ(50px);}}// 鼠标触摸后样式.outerBox:hover {cursor: pointer;}.outerBox:hover .frontImgBox {transform: rotateY(0deg) translateZ(200px);}.outerBox:hover .queenImgBox {transform: translateZ(-200px) rotateY(180deg);}.outerBox:hover .liftImgBox {transform: rotateY(90deg) translateZ(200px);}.outerBox:hover .rightImgBox {transform: rotateY(-90deg) translateZ(200px);}.outerBox:hover .topImgBox {transform: rotateX(90deg) translateZ(200px);}.outerBox:hover .bottomImgBox {transform: rotateX(-90deg) translateZ(200px);}}
}
</style>
实现效果
教你用 CSS 实现超真实的 3D 相册,让你的照片立体感 UPUP相关推荐
- 一行代码教你七夕情人节如何告白❤—动漫3D相册(音乐+文字)HTML+CSS+JavaScript
❤ 一行代码教你七夕情人节如何告白-动漫3D相册(音乐+文字)HTML+CSS+JavaScript 七夕是中国的情人节,七夕520情人节也是一个非常适合表白的日子,可以把自己平常害怕说出来的话,在这 ...
- 制作一个浪漫温馨的生日礼物送她~html+css+javascript蓝色梦幻海洋3D相册(含音乐)
❉ 制作一个浪漫温馨的生日礼物送她~html+css+javascript蓝色梦幻海洋3D相册(含音乐) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在 ...
- 制作一个浪漫温馨的生日礼物送她~html+css+javascript蓝色梦幻海洋3D相册(含音乐)...
❉ 制作一个浪漫温馨的生日礼物送她~html+css+javascript蓝色梦幻海洋3D相册(含音乐) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在 ...
- 520情人节程序员的浪漫告白~html+css+js浪漫星空❤爱心3D相册 (含音乐)
❉ 来自程序员的浪漫告白~html+css+js浪漫星空❤爱心3D相册 (含音乐)可自定义编辑文字 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/圣诞节/元旦节跨年/程序员表白,是不是要给 ...
- 炫酷3D相册❤ 520七夕情人节表白网页制作❤(HTML+CSS+JavaScript)
师妹直呼"这也太哇塞了吧" ❤520七夕情人节表白网页制作❤(HTML+CSS+JavaScript) 520七夕节告白,也就是中国的情人节,你除了送花你还会什么?? 快来制作高端 ...
- ❀520七夕情人节告白网页代码❀—浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript
❀ 520七夕情人节告白网页代码❀-浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript 520七夕节告白,也就是中国的情人节,你除了送花你还会什么?? 快来制作高端大气上档次的D立体动 ...
- HTML+CSS+JS 实现抖音3D炫酷相册? 创意网页小礼物了解一下呗?(纪念日的小浪漫)
为心爱的人做一个超具创意的网页生日祝福吧❤(飘动爱心3D相册)HTML+CSS+JavaScript 是不是还没有给心爱的人准备小礼物呀,但是别担心,精心创作了一个"飘动爱心3D相册&quo ...
- HTML5七夕情人节表白网页制作【绘制冬季下雪3D相册】HTML+CSS+JavaScript html生日快乐祝福网页制作
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
- html5导航 按钮,CSS实例:超酷的网站导航按钮
CSS实例:超酷的网站导航按钮 互联网 发布时间:2009-04-02 19:35:20 作者:佚名 我要评论 网页制作Webjx文章简介:本文一步一步手把手教你打造一个极酷的三层分离的标 ...
最新文章
- vba 您正和其他用户尝试修改同一条数据_专辑二 | Moodle学习之Moodle添加用户
- c语言从串口获取数据,如何通过串口来读写数据,请教达人
- 自定义LeNet5,开启你的炼丹之路
- 简单好用的计算器:bc
- Remon Spekreijse CSerialPort串口类的修正版2014-01-10
- Niginx工作笔记-通过error.log定位错误(记录一个寻找问题的方法)
- 使用javah生成.h文件, 出现无法访问android.app,Activity的错误的解决
- 【utorrent】ubuntu 安装utorrent
- Dao层抽取BaseDao公共方法
- 【Java程序设计】类与对象的基本概念(下)
- [转]unresolved external symbol _*
- csgo如何增加人机数量及平衡_FPS之CSGO职业哥瞄准秘技,人人都能学得会的瞄准方式...
- 【FastDFS-V5.11】Linux下FastDFS+Nginx实现分布式图片服务器搭建详细教程(单机模式)
- 拼多多登录不上是什么原因 怎么解决拼多多登录失败
- linux 消息队列大小设置,linux 消息队列 参数
- AI改变现代商业的25种方式
- 安全合规/法案--30--《网络安全审查办法》原文及解读
- 好记性不如烂笔头,要保持学习
- 在2.5亿个整数中找出不重复的整数,注,内存不足以容纳这2.5亿个整数
- wordpress 数据库_在WordPress中使用数据库
热门文章
- 软链接解决存储空间不足
- 【js语法】获取星期 new Date().getDay()
- Java学习笔记类对象多态继承(下)
- vultr最多可以开几台服务器,Vultr服务器添加多个IP实现Vultr多线服务器的方法与教程...
- 设计模式中,MVC模式与MVT模式的区别
- 沉睡者 - 微信内测一个手机可注册2微信号
- 关于 Microsoft Teams 开发你需要知道的一切
- 从头开始搞懂 MySQL(07)为什么同一条 SQL 时快时慢
- Matlab App Designer自学笔记(九):容器及图窗控件
- laravel5.5利用网易邮箱发送邮件