实现效果：

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

实现代码：

<!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. 伪元素 before 和 after 初探

    伪元素 before 和 after 初探 使用了 CodePen 做演示,欢迎点击预览 定义 首先来看 MDN 的定义: ::before 创建一个伪元素,作为已选中元素的第一个子元素,常通过 co ...

  2. HTML5中form的新增属性或元素

    1.新增的表单元素 1.1 progress表示任务的完成情况,常用于进度条. max 定义进度元素所要求的任务的工作量,默认值为1 value 定义已经完成的工作量,如果max值为1,该值必须是介于 ...

  3. localstorage浏览器储存

    需求 a.html页面生成订单信息,b.html中调用. 通过不操作数据库,直接在浏览器自带的数据库中进行操作,当然主要是对Json数据的操作. a.html代码部分: <!--html--&g ...

  4. 【S2-053】Struts2远程命令执行漏洞（CVE-2017-12611）

    继S2-052之后,Apache Struts 2再次被曝存在远程代码执行漏洞,漏洞编号S2-053,CVE编号CVE-2017-1000112. 当开发人员在Freemarker标签中使用错误的构造 ...

  5. day1 执行用例

    故事1 今天的工作,是执行已写好的"回馈"模块用例 每个子模块的用例都有优先级之分 肯定要先进行通过性测试,验证正常流 因此,我优先执行各个子模块优先级最高的那条用例,进行通过性测 ...

  6. JavaMail(二):利用JavaMail发送复杂邮件

    上一篇文章我们学习了利用JavaMail发送简单邮件,这篇文章我们利用JavaMail发送稍微复杂一点的邮件(包含文本.图片.附件).这里只贴出核心代码,其余代码可参考JavaMail(一):利用Ja ...

  7. C++ 小练习，一个整型数字的处理

    #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> //输入一个任意位数的int整数,并判断该整数的位数,并输出每一位数(每个数字中间用空 ...

  8. js中的堆和栈

    http://www.jscwwd.com/article/5e533ae2552a8e2bf45d3d69 这里先说两个概念:1.堆(heap)2.栈(stack)堆 是堆内存的简称.栈 是栈内存的 ...

  9. vquery 一些应用

    // JavaScript Document function myAddEvent(obj,sEv,fn){ if(obj.attachEvent){ obj.attachEvent('on'+sE ...

  10. 用纯Python实现循环神经网络RNN向前传播过程(吴恩达DeepLearning.ai作业)

    Google TensorFlow程序员点赞的文章!   前言 目录: - 向量表示以及它的维度 - rnn cell - rnn 向前传播 重点关注: - 如何把数据向量化的,它们的维度是怎么来的 ...