掀开图片显示介绍的css效果

浅浅的花香味﹌ 2022-05-31 08:43 160阅读 0赞

# 概述 #

主要运用到CSS3的3D transform等变换

# 详细 #

#### 代码下载：[http://www.demodashi.com/demo/10575.html][http_www.demodashi.com_demo_10575.html] ####

#### 一、概述 ####

1、主要运用到CSS3的3D transform等变换

*  transform：向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜

<table style="border-spacing:0px; border-collapse:collapse; background-color:transparent"> 
 <tbody style="margin:0px; padding:0px; border:0px"> 
 <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
 <th style="padding:0px 15px 0px 6px; text-align:left; margin:0px; border-color:rgb(63,63,63); vertical-align:baseline; color:rgb(255,255,255); width:294px; background-color:rgb(63,63,63)"> 值</th> 
 <th style="padding:0px 15px 0px 6px; text-align:left; margin:0px; border-color:rgb(63,63,63); vertical-align:baseline; color:rgb(255,255,255); background-color:rgb(63,63,63)"> 描述</th> 
 <th style="padding:0px 15px 0px 6px; text-align:left; margin:0px; border-color:rgb(63,63,63); vertical-align:baseline; color:rgb(255,255,255); width:42px; background-color:rgb(63,63,63)"> 测试</th> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> none</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> 定义不进行转换。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_rotate&amp;p=22" style="background:transparent; color:rgb(144,11,9); margin:0px; padding:0px; border-width:0px 0px 1px; border-bottom-style:solid; border-bottom-color:rgb(144,11,9)" rel="nofollow">测试</a></td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> matrix(n,n,n,n,n,n)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> 定义 2D 转换，使用六个值的矩阵。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_matrix" style="background:transparent; color:rgb(144,11,9); margin:0px; padding:0px; border-width:0px 0px 1px; border-bottom-style:solid; border-bottom-color:rgb(144,11,9)" rel="nofollow">测试</a></td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> 定义 3D 转换，使用 16 个值的 4x4 矩阵。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> </td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> translate(x,y)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> 定义 2D 转换。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_translate" style="background:transparent; color:rgb(144,11,9); margin:0px; padding:0px; border-width:0px 0px 1px; border-bottom-style:solid; border-bottom-color:rgb(144,11,9)" rel="nofollow">测试</a></td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> translate3d(x,y,z)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> 定义 3D 转换。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> </td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> translateX(x)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> 定义转换，只是用 X 轴的值。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_translatex" style="background:transparent; color:rgb(144,11,9); margin:0px; padding:0px; border-width:0px 0px 1px; border-bottom-style:solid; border-bottom-color:rgb(144,11,9)" rel="nofollow">测试</a></td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> translateY(y)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> 定义转换，只是用 Y 轴的值。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_translatey" style="background:transparent; color:rgb(144,11,9); margin:0px; padding:0px; border-width:0px 0px 1px; border-bottom-style:solid; border-bottom-color:rgb(144,11,9)" rel="nofollow">测试</a></td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> translateZ(z)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> 定义 3D 转换，只是用 Z 轴的值。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> </td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> scale(x,y)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> 定义 2D 缩放转换。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_scale" style="background:transparent; color:rgb(144,11,9); margin:0px; padding:0px; border-width:0px 0px 1px; border-bottom-style:solid; border-bottom-color:rgb(144,11,9)" rel="nofollow">测试</a></td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> scale3d(x,y,z)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> 定义 3D 缩放转换。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> </td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> scaleX(x)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> 通过设置 X 轴的值来定义缩放转换。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_scalex" style="background:transparent; color:rgb(144,11,9); margin:0px; padding:0px; border-width:0px 0px 1px; border-bottom-style:solid; border-bottom-color:rgb(144,11,9)" rel="nofollow">测试</a></td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> scaleY(y)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> 通过设置 Y 轴的值来定义缩放转换。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_scaley" style="background:transparent; color:rgb(144,11,9); margin:0px; padding:0px; border-width:0px 0px 1px; border-bottom-style:solid; border-bottom-color:rgb(144,11,9)" rel="nofollow">测试</a></td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> scaleZ(z)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> 通过设置 Z 轴的值来定义 3D 缩放转换。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> </td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> rotate(angle)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> 定义 2D 旋转，在参数中规定角度。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_rotate" style="background:transparent; color:rgb(144,11,9); margin:0px; padding:0px; border-width:0px 0px 1px; border-bottom-style:solid; border-bottom-color:rgb(144,11,9)" rel="nofollow">测试</a></td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> rotate3d(x,y,z,angle)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> 定义 3D 旋转。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> </td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> rotateX(angle)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> 定义沿着 X 轴的 3D 旋转。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_rotatex" style="background:transparent; color:rgb(144,11,9); margin:0px; padding:0px; border-width:0px 0px 1px; border-bottom-style:solid; border-bottom-color:rgb(144,11,9)" rel="nofollow">测试</a></td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> rotateY(angle)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> 定义沿着 Y 轴的 3D 旋转。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_rotatey" style="background:transparent; color:rgb(144,11,9); margin:0px; padding:0px; border-width:0px 0px 1px; border-bottom-style:solid; border-bottom-color:rgb(144,11,9)" rel="nofollow">测试</a></td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> rotateZ(angle)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> 定义沿着 Z 轴的 3D 旋转。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_rotatez" style="background:transparent; color:rgb(144,11,9); margin:0px; padding:0px; border-width:0px 0px 1px; border-bottom-style:solid; border-bottom-color:rgb(144,11,9)" rel="nofollow">测试</a></td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> skew(x-angle,y-angle)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> 定义沿着 X 和 Y 轴的 2D 倾斜转换。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_skew" style="background:transparent; color:rgb(144,11,9); margin:0px; padding:0px; border-width:0px 0px 1px; border-bottom-style:solid; border-bottom-color:rgb(144,11,9)" rel="nofollow">测试</a></td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> skewX(angle)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> 定义沿着 X 轴的 2D 倾斜转换。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_skewx" style="background:transparent; color:rgb(144,11,9); margin:0px; padding:0px; border-width:0px 0px 1px; border-bottom-style:solid; border-bottom-color:rgb(144,11,9)" rel="nofollow">测试</a></td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> skewY(angle)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> 定义沿着 Y 轴的 2D 倾斜转换。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_skewy" style="background:transparent; color:rgb(144,11,9); margin:0px; padding:0px; border-width:0px 0px 1px; border-bottom-style:solid; border-bottom-color:rgb(144,11,9)" rel="nofollow">测试</a></td> 
 </tr> 
 <tr style="margin:0px; padding:0px; border:0px; background-color:rgb(245,245,245)"> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> perspective(n)</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> 为 3D 转换元素定义透视视图。</td> 
 <td style="padding:6px 15px 6px 6px; vertical-align:text-top; margin:0px; border-color:rgb(170,170,170)"> 测试</td> 
 </tr> 
 </tbody> 
</table>

2、做的时候遇到了两个问题：

*  图片掀开的效果
 *  鼠标hover效果的稳定

#### 二、图片掀开的效果 ####

把动画拆开来看，感觉应该是有一个沿着X轴的旋转，设置一下transform效果

img{
                transform: rotateX(90deg);
            }

但是这样看起来更像是图片收缩了，并没有在视觉上产生旋转的效果。此时，需要在img的父元素上添加perspective属性，更改它的透视位置。

.picBox{
        perspective:1000px;
        }

这时候再看，效果已经差不多了，只要img再同时增加一个向上的移动效果即可。所以最后img的transform设置为

img{
        transform: translateY(-320px) rotateX(90deg);
    }

这样掀开图片的效果基本上就搞定了。但是，由于最开始把hover设置在了img自己身上，要同时设置描述文本.overLayer，就要写成

img:hover +.overLayer

（按惯性写空格就不会起效果。因为img和.overLayer是同级元素）这时最明显的问题在于hover效果不稳定。

#### 三、鼠标hover效果的稳定 ####

因为img在做变化，鼠标保持不动的时候，img可能已经不在鼠标的范围里面，就会产生晃晃荡荡忽上忽下的颤抖效果，看起来很不舒服。最好的解决方法就是把hover设置在img和.overLayer共同的父元素.picBox身上，然后分别给他们设置样式。

.picBox
        &:hover img{
            transform: translateY(-320px) rotateX(90deg);
            opacity: 0;
        }
        
        &:hover .overLayer{
            opacity: 1;
        }    
    
    }

（使用的scss）这样效果就能稳定了。

#### 四、html代码 ####

html代码如下：

<div class="picBox">
 <img src="../img/1.jpg" alt="">
 <div class="overLayer">
 <h3 class="title">title here</h3>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis labore molestiae magni, consequatur nesciunt expedita. Dicta placeat minus sint, culpa.
 </div>
 </div>
 
 <div class="picBox">
 <img src="../img/2.jpg" alt="">
 <div class="overLayer">
 <h3 class="title">title here</h3>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut pariatur excepturi, voluptatum consectetur facere commodi at distinctio iste sapiente necessitatibus.
 </div>
 </div>

#### 五、运行与文件截图 ####

1、文件截图

![blob.png][]

2、运行：

双击try文件夹里面的index\_try.html文件即可看到效果

3、运行时的截图

![1.gif][]

#### 六、其他补充 ####

总结：样式写死了尺寸，导致整体缩放时很多地方都要重写，下次要注意改成百分比的形式，或者设置变量，便于修改。

#### 注：本文著作权归作者，由demo大师（[http://www.demodashi.com][http_www.demodashi.com]）宣传，拒绝转载，转载需要作者授权 ####

[http_www.demodashi.com_demo_10575.html]: http://www.demodashi.com/demo/10575.html
[blob.png]: /images/20220531/cb7997681ba145c2ad88f2dffcccf499.png
[1.gif]: /images/20220531/fea51ab5b47e44f7bd60cb23a0556e58.png
[http_www.demodashi.com]: http://www.demodashi.com/