实现效果：

当鼠标悬停在图片上面时，图片发生翻转，文案出来，鼠标取消之后就又恢复

实现代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>3D变换</title>

    <style>

        *{

            margin:0;

            padding: 0;

        }

        body{

            background-color: #0d3462;

        }

        #piclist{

            width: 760px;

            height: 220px;

            margin:100px auto;

        }

        .picbox{

            float:left;

            width: 170px;

            height: 190px;

            margin:10px;

            position: relative;

            -webkit-transform-style: preserve-3d;

             -moz-transform-style: preserve-3d;

             -ms-transform-style: preserve-3d;

             transform-style: preserve-3d;

             transition: 1.5s;

        }

        .picbox:hover{

            transform:rotateY(180deg);

        }

        .face{

            width: 170px;

            height: 190px;

            position: absolute;

        }

        .front{

            border:2px solid #4b2518;

        }

        .back{

           -webkit-transform: rotateY(180deg);

            -ms-transform: rotateY(180deg);

            -o-transform: rotateY(180deg);

            transform: rotateY(180deg);

            /*background-color: #4b2518;*/

            border: 2px solid #fff;

        }

        .back h3{

            color: white;

            text-align: center;

        }

    </style>

</head>

<body>

    <div id="piclist">

        <div class="picbox">

            <div class="face front"><img src="data:images/1.jpg" alt=""></div>

            <div class="face back">

                <h3>浓缩咖啡</h3>

            </div>

        </div>

        <div class="picbox">

            <div class="face front"><img src="data:images/2.jpg" alt=""></div>

            <div class="face back">

                <h3>浓缩咖啡</h3>

            </div>

        </div>

        <div class="picbox">

            <div class="face front"><img src="data:images/3.jpg" alt=""></div>

            <div class="face back">

                <h3>浓缩咖啡</h3>

            </div>

        </div>

        <div class="picbox">

            <div class="face front"><img src="data:images/4.jpg" alt=""></div>

            <div class="face back">

                <h3>浓缩咖啡</h3>

            </div>

        </div>

    </div>

</body>

</html>

CSS3实现3D转换的更多相关文章

  1. CSS自学笔记（13）:CSS3 2D/3D转换

    CSS3中新增了对元素进行2D和3D的转换效果,这样可以是开发人员很方便的做出视觉效果更好的网页来. 通过CSS3中属性的定义,我们可以对元素进行移动.缩放.拉伸.旋转等等,可以通过定义transfo ...

  2. HTML5和CSS3实现3D转换效果 CSS3的3D效果

    上次,我们一起研究了css3的2d模块,这次我们一起来看一下css3的3d模块. 首先,我们来了解一下3d的坐标系,x轴在屏幕上为水平方向,y轴为垂直方向,而z轴为垂直于屏幕的方向. 不理解的话可以参 ...

  3. CSS3：3D转换

    几个突破口:(为了更简洁理解,先忽略兼容) 1.认识3D的坐标系 rotateX()-----------元素绕X轴旋转 rotateY() -----------元素绕Y轴旋转 rotateZ() ...

  4. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  5. CSS笔记（十二）CSS3之2D和3D转换

    参考:http://www.w3school.com.cn/css3/css3_2dtransform.asp 2D Transform 方法 函数 描述 matrix(n,n,n,n,n,n) 定义 ...

  6. CSS3 3D转换

    CSS3允许你使用3D转换来对元素进行格式化. 3D转换方法: rotateX() rotateY() 浏览器支持 属性 浏览器支持 transform           IE10和Firefox支 ...

  7. css3 2d转换3d转换以及动画的知识点汇总

    css3 2d转换 2d转换的方法: 1.移动 translate(x, y) 可以改变元素的位置,x.y可为负值: 2.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x.y的取值 ...

  8. css3动画2D、3D转换

    css3动画的2D.3D转换代码: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  9. 前端笔记之HTML5&CSS3（下）2D/3D转换&animate动画

    一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...

随机推荐

  1. 痞子衡嵌入式：恩智浦i.MX RTxxx系列MCU启动那些事（6.1）- FlexSPI NOR连接方式大全(RT600)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦i.MX RT600的FlexSPI NOR启动的连接方式. 痞子衡前段时间一鼓作气写完了三篇关于i.MXRT1xxx系列Flex ...

  2. Mac笔记本使用小道解答集

    如何设置Mac默认应用程序 https://www.jianshu.com/p/0f912e6c846c 苹果本安装微软雅黑 下载微软雅黑字体Mac版 解压.ttf 拖拽放入 我的电脑/资源库/fon ...

  3. java后台生成并下载二维码

    这个功能在项目开发中是很基础的,平时用到的也很多,这里简单记录一下,以便以后使用的时候参考 前提业务要求:前台页面展示数据,有下载按钮,点击下载,下载对应数据的二维码. 首先,在pom.xml文件中添 ...

  4. js中排序方法

    有些代码一两个月都会忘了,有空多做下总结,记录下来,等需要用到的时候可以来翻翻总结的博客.写技术博客,对自己是一种总结,对别人,是一种参考. 1.sort()方法 var ar1=[2,4,6,8,1 ...

  5. 实验三——NFS服务器配置

    实验三——NFS服务器配置 实 验 基 本 信 息 实验名称:NFS服务器配置(3学时) 实验时间:    年 月 日 实验地点:   信工606实验室 同组同学: 实验目的: 了解NFS服务的基本原 ...

  6. scrapycrawl 爬取笔趣阁小说

    前言 第一次发到博客上..不太会排版见谅 最近在看一些爬虫教学的视频,有感而发,大学的时候看盗版小说网站觉得很能赚钱,心想自己也要搞个,正好想爬点小说能不能试试做个网站(网站搭建啥的都不会...) 站 ...

  7. Redis主从原理及哨兵模式

    1.Redis主从搭建 主从的搭建很简单,主节点设置连接密码,从节点的配置上主节点的ip和端口,以及密码,一般从节点我们都设置只读模式. 主节点配置: 主节点密码: requirepass xxx 从 ...

  8. 你知道吗，Flutter内置了10多种Button控件

    注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 Flutter内置了10多种Button(按钮)类控件供我 ...

  9. JVM05——JVM类加载机制知多少

    我们已经讲过 JVM 相关的很多常见知识点,感兴趣的朋友可以在我的往期文章中查看.接下来将继续为各位带来 JVM 类加载机制.关注我的公众号「Java面典」了解更多 Java 相关知识点. 类生命周期 ...

  10. 附013.Kubernetes永久存储Rook部署

    一 Rook概述 1.1 Ceph简介 Ceph是一种高度可扩展的分布式存储解决方案,提供对象.文件和块存储.在每个存储节点上,将找到Ceph存储对象的文件系统和Ceph OSD(对象存储守护程序)进 ...