3D变换之光标悬停图片翻转背面文字说明

2023-10-29 03:50

本文主要是介绍3D变换之光标悬停图片翻转背面文字说明,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

设计思路

        首先做一个包括图片和说明文字的简单的页面结构,然后再设置它的变换。将变换的元素,即照片和文字放在一个父容器里面,这就需要四个父容器 ,再将这四个父容器放在最外层的舞台上面进行变换,在每个父容器里面都包括两部分:一个是上面的图片,还有一个是下面的说明文字。最后采用层定位将图片和下面的说明文字让它有一个叠加的效果。先显示这个图片,当鼠标悬停在上面的时候,由于做了3D变换,(即每幅图片翻转的效果是围绕Y轴翻转180度来进行的),那么后面的文字就会被显示出来。

 

㈠HTML主页文件的基本结构

     先做一个整个需要变换元素它的一个结构。最外层有一个舞台,放在一个盒子里面,给舞台起一个名字,叫“piclist”。由于当前的舞台只用到一个,就使用ID来进行引用,用“#”号来定义,舞台里面有四组需要变换的元素,做4个盒子作为父容器,给父容器起一个名字,叫“picbox”,采用class来引用这个样式,父容器里面有两个部分需要变换的元素,正面部分放入图片,背面部分放入说明的文字。正面和背面都有共同的样式,将它们共同的样式用class来引用,放在face这样的一个共同样式里面。正面的图片有一个单独的样式,将它放在front这样的一个样式里面来引用;背面的文字也有一个单独的样式,将它放在back里面来引用。这就是当前的父容器的结构。我们再设置一下容器里面图片和文字的内容,其中图片采用相对路径进行添加。

    我们简单的设置一下CSS样式部分:首先将默认样式清零,设置页面的背景颜色为深蓝色,直接在body标签里面进行设置。

    当前的基本结构和样式就已经设置完了,让我们看一下代码是如何编写的。

 

下面就是代码部分:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         *{
 8             padding: 0;
 9             margin: 0;
10         }
11         body{
12             background-color:#0D3462;
13         }        
14         
15     </style>
16 </head>
17 <body>
18     <div id="piclist">
19         <div class="picbox">
20                 <div class="face front"><img src="images/1.jpg"></div>
21             <div class="face back"><h3>浓缩咖啡</h3></div>
22         </div>
23         <div class="picbox">
24                 <div class="face front"><img src="images/2.jpg"></div>
25             <div class="face back"><h3>卡布奇诺</h3></div>
26         </div>
27         <div class="picbox">
28                 <div class="face front"><img src="images/3.jpg"></div>
29             <div class="face back"><h3>拿铁</h3></div>
30         </div>
31         <div class="picbox">
32             <div class="face front"><img src="images/4.jpg"></div>
33             <div class="face back"><h3>摩卡</h3></div>
34         </div>
35     </div>
36 </body>
37 </html>

 

效果图如下:

 

㈡CSS样式设置后展开的效果

       在上面的基础上将样式细化一下。首先设置舞台的样式:设置舞台的高度,宽度,也就是舞台的大小,这个数字是根据里面元素的大小设定的。设置舞台的位置:垂直方向距离上边距有100px的距离,水平方向居中显示。设置四个父容器的样式:四个父容器作为一个盒子,排列为一行,设置它们的浮动为向左浮动,再设置它们的高度,宽度,外边距,最重要的是由于父元素它需要里面包含需要变换的内容,设置3D变换(编辑器里面采用trsf扩展生成),将它的值设置为preserve-3d,这种变换不是一下子就变换过来的,而是渐进的变换,设置transition,让它在1.5s内完成变换,这是对于父容器的初步设定。

       设置在父容器里面鼠标悬停在上面的时候来进行的3D变换:沿着Y轴翻转180度。父容器里面两个需要变换的元素,它们共同的效果就像扑克牌的两面一样。那么来设置face的样式:先设置高和宽,进一步设置正面放置图片的这一面的样式,设置它的边框为2个像素实线,为了配合咖啡的颜色,设置边框颜色为棕色,再设置背面的样式,设置它的背景颜色是咖啡色,边框为2个像素,实线,白色来显示,背面的文字用白色显示,文本内容水平居中。

 

下面是CSS样式设置后的代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7                 *{
 8             padding: 0;
 9             margin: 0;
10         }
11         body{
12             background-color:#0D3462;
13         }
14         /*舞台*/
15         #piclist{  
16             width:760px; /*170*4+10*8*/
17             height: 220px;/*190+边框*/
18             margin: 100px auto;
19         }
20         /*容器*/
21         .picbox{
22             float: left;
23             /*position: relative;*/
24             width: 170px;
25             height: 190px;
26             margin: 10px;
27             /*3d——双面效果*/
28             transform-style:preserve-3d;
29             transition:1.5s;
30         }
31         /*舞台鼠标悬停,就翻转,
32         正面背面互换*/
33         .picbox:hover{
34             transform:rotateY(180deg);
35         }
36         .face{
37             /*position: absolute;*/
38             width:170px;
39             height:190px;
40         }
41         .front{
42             border:2px solid #4b2518;
43         }        
44         .back{
45             /*让它成为背面,开始只显示正面*/
46             /*transform:rotateY(180deg);    */
47             background-color: #4b2518;
48             border:2px solid #fff;
49         }
50         .back h3{
51             color:white;
52             text-align:center;
53         }
54     </style>
55 </head>
56 <body>
57     <div id="container">
58         <div id="piclist">
59             <div class="picbox">
60                    <div class="face front"><img src="images/1.jpg"></div>
61                 <div class="face back"><h3>浓缩咖啡</h3></div>
62             </div>
63             <div class="picbox">
64                    <div class="face front"><img src="images/2.jpg"></div>
65                 <div class="face back"><h3>卡布奇诺</h3></div>
66             </div>
67             <div class="picbox">
68                    <div class="face front"><img src="images/3.jpg"></div>
69                 <div class="face back"><h3>拿铁</h3></div>
70             </div>
71             <div class="picbox">
72                 <div class="face front"><img src="images/4.jpg"></div>
73                 <div class="face back"><h3>摩卡</h3></div>
74             </div>
75         </div>
76     </div>
77 </body>
78 </html>

 

效果图如下:

 

 ★  当前的图片和文字已经设置好,而且鼠标悬停在上面也有渐进翻转的效果,但是有两个问题:

   ⑴图片和文字的关系没有形成正反面的关系;

   ⑵当鼠标悬停在上面的时候,会发现背面的文字已经被翻转过来,相当于反着写的字。

 

★我们最后要实现的效果是当前没有翻转的效果,那么如何做到这一点呢?

   将背面的文字初始状态下就先翻转一下,当鼠标停留在上面的时候,它又被翻转回来,那么就形成正常字序的文字了。

 

㈢完整效果代码

    设置层定位。需要在父元素,也就是父容器里面设置它的层定位的方式,将父元素设置成相对定位,子元素无论是正面还是背面,它都应该是一个绝对定位,再将背面设置成初始状态就是翻转的,那么让初始状态下翻转180度。

     

完整的代码如下面所示:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         *{
 8             padding: 0;
 9             margin: 0;
10         }
11         body{
12             background-color:#0D3462;
13         }
14         /*舞台*/
15         #piclist{  
16             width:760px; /*170*4+10*8*/
17             height: 220px;/*190+边框*/
18             margin: 100px auto;
19         }
20         /*容器*/
21         .picbox{
22             float: left;
23             position: relative;
24             width: 170px;
25             height: 190px;
26             margin: 10px;
27             /*3d——双面效果*/
28             transform-style:preserve-3d;
29             transition:1.5s;
30         }
31         /*舞台鼠标悬停,就翻转,
32         正面背面互换*/
33         .picbox:hover{
34             transform:rotateY(180deg);
35         }
36         .face{
37             position: absolute;
38             width:170px;
39             height:190px;
40         }
41         .front{
42             border:2px solid #4b2518;
43         }        
44         .back{
45             /*让它成为背面,开始只显示正面*/
46             transform:rotateY(180deg);    
47             background-color: #4b2518;
48             border:2px solid #fff;
49         }
50         .back h3{
51             color:white;
52             text-align:center;
53         }
54     </style>
55 </head>
56 <body>
57     <div id="container">
58         <div id="piclist">
59             <div class="picbox">
60                    <div class="face front"><img src="images/1.jpg"></div>
61                 <div class="face back"><h3>浓缩咖啡</h3></div>
62             </div>
63             <div class="picbox">
64                    <div class="face front"><img src="images/2.jpg"></div>
65                 <div class="face back"><h3>卡布奇诺</h3></div>
66             </div>
67             <div class="picbox">
68                    <div class="face front"><img src="images/3.jpg"></div>
69                 <div class="face back"><h3>拿铁</h3></div>
70             </div>
71             <div class="picbox">
72                 <div class="face front"><img src="images/4.jpg"></div>
73                 <div class="face back"><h3>摩卡</h3></div>
74             </div>
75         </div>
76     </div>
77 </body>
78 </html>

 

效果图如下:

 

       由于用了层定位,那么父元素是相对定位,两个子元素都是相对于父元素的一个绝对定位,所以意味着两个子元素原有文档流的位置丢失,那么它们就会层叠在一起,而且初始状态下,我们就已经将文字翻转180度,那么光标停留在上面的时候,它又被翻转回来,就形成了最终的效果。 

 

 

以上就是css3中3D变换的示例——鼠标悬停在图片上翻转背面的文字说明的全部代码和效果图。希望有所帮助。

 

转载于:https://www.cnblogs.com/shihaiying/p/11354387.html

这篇关于3D变换之光标悬停图片翻转背面文字说明的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/298059

相关文章

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题:墙体两侧特征混淆误匹配,导致建图和定位偏差,表现为过门跳变、外月台走歪等 ·解决思路:预期的根治方案IGICP需要较长时间完成上线,先使用切分地图的工程化方案,即墙体两侧切分为不同地图,在某一侧只使用该侧地图进行定位 方案思路 切分原理:切分地图基于关键帧位置,而非点云。 理论基础:光照是直线的,一帧点云必定只能照射到墙的一侧,无法同时照到两侧实践考虑:关

使用opencv优化图片(画面变清晰)

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化,使其看起来更清晰,同时保持尺寸不变,通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多,主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器:相机传

MiniGPT-3D, 首个高效的3D点云大语言模型,仅需一张RTX3090显卡,训练一天时间,已开源

项目主页:https://tangyuan96.github.io/minigpt_3d_project_page/ 代码:https://github.com/TangYuan96/MiniGPT-3D 论文:https://arxiv.org/pdf/2405.01413 MiniGPT-3D在多个任务上取得了SoTA,被ACM MM2024接收,只拥有47.8M的可训练参数,在一张RTX

Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

1.前言 在10.0的系统rom定制化开发中,在进行一些平板等默认横屏的设备开发的过程中,需要在进入camera2的 时候,默认预览图像也是需要横屏显示的,在上一篇已经实现了横屏预览功能,然后发现横屏预览后,拍照保存的图片 依然是竖屏的,所以说同样需要将图片也保存为横屏图标了,所以就需要看下mtk的camera2的相关横屏保存图片功能, 如何实现实现横屏保存图片功能 如图所示: 2.mtk

Spring MVC 图片上传

引入需要的包 <dependency><groupId>commons-logging</groupId><artifactId>commons-logging</artifactId><version>1.1</version></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-

Prompt - 将图片的表格转换成Markdown

Prompt - 将图片的表格转换成Markdown 0. 引言1. 提示词2. 原始版本 0. 引言 最近尝试将图片中的表格转换成Markdown格式,需要不断条件和优化提示词。记录一下调整好的提示词,以后在继续优化迭代。 1. 提示词 英文版本: You are an AI assistant tasked with extracting the content of

SAM2POINT:以zero-shot且快速的方式将任何 3D 视频分割为视频

摘要 我们介绍 SAM2POINT,这是一种采用 Segment Anything Model 2 (SAM 2) 进行零样本和快速 3D 分割的初步探索。 SAM2POINT 将任何 3D 数据解释为一系列多向视频,并利用 SAM 2 进行 3D 空间分割,无需进一步训练或 2D-3D 投影。 我们的框架支持各种提示类型,包括 3D 点、框和掩模,并且可以泛化到不同的场景,例如 3D 对象、室

研究人员在RSA大会上演示利用恶意JPEG图片入侵企业内网

安全研究人员Marcus Murray在正在旧金山举行的RSA大会上公布了一种利用恶意JPEG图片入侵企业网络内部Windows服务器的新方法。  攻击流程及漏洞分析 最近,安全专家兼渗透测试员Marcus Murray发现了一种利用恶意JPEG图片来攻击Windows服务器的新方法,利用该方法还可以在目标网络中进行特权提升。几天前,在旧金山举行的RSA大会上,该Marcus现场展示了攻击流程,

恶意PNG:隐藏在图片中的“恶魔”

&lt;img src=&quot;https://i-blog.csdnimg.cn/blog_migrate/bffb187dc3546c6c5c6b8aa18b34b962.jpeg&quot; title=&quot;214201hhuuhubsuyuukbfy_meitu_1_meitu_2.jpg&quot;/&gt;&lt;/strong&gt;&lt;/span&gt;&lt;

Verybot之OpenCV应用二:霍夫变换查找圆

其实我是想通过这个程序来测试一下,OpenCV在Verybot上跑得怎么样,霍夫变换的原理就不多说了,下面是程序: #include "cv.h"#include "highgui.h"#include "stdio.h"int main(int argc, char** argv){cvNamedWindow("vedio",0);CvCapture* capture;i