实现效果：

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

实现代码：

<!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. Keras在MNIST实现LeNet-5模型训练时的错误？

    当使用Keras API 训练模型时,训练时报错? UnknownError (see above for traceback): Failed to get convolution algorith ...

  2. javascript的constructor属性介绍

    之前闲来了解了__proto__和prototype的区别,每个对象都有隐私属性__proto__,而prototype是javascript函数特有的属性.那么constructor属性呢?最近是遇 ...

  3. vue+webpack怎么分环境进行打包

    这里说下,webpack打包里面涉及到的东西,不止webpack,还有node的知识, node的全局变量process,process.env用于返回用户环境信息对象,因为是node的全局变量,所以 ...

  4. NLP自然语言处理入门-- 文本预处理Pre-processing

    引言 自然语言处理NLP(nature language processing),顾名思义,就是使用计算机对语言文字进行处理的相关技术以及应用.在对文本做数据分析时,我们一大半的时间都会花在文本预处理 ...

  5. 分布式图数据库 Nebula Graph 的 Index 实践

    导读 索引是数据库系统中不可或缺的一个功能,数据库索引好比是书的目录,能加快数据库的查询速度,其实质是数据库管理系统中一个排序的数据结构.不同的数据库系统有不同的排序结构,目前常见的索引实现类型如 B ...

  6. java开发——Cloneable接口、clone()方法和深浅拷贝

    1.实现Cloneable接口表明该类的对象是允许克隆的. 2.允许克隆的意思是:可以调用clone()方法. 3.深拷贝还是浅拷贝,取决于如何重写Object的clone()方法. 4.原对象和克隆 ...

  7. DevOps - 持续集成

    最近在担任公司部门的DevOps Champion的角色,一直觉得这个只是一个协调者的角色(而不是一个SME的角色),我的工作大概就是将每个项目的devops工具收集一下,然后用图表的形式去体现大家用 ...

  8. h5样式

    禁止长按默认事件 安卓(android): window.ontouchstart = function(e) { e.preventDefault(); }; 苹果(ios): -webkit-to ...

  9. 【JDK】JDK源码分析-Semaphore

    概述 Semaphore 是并发包中的一个工具类,可理解为信号量.通常可以作为限流器使用,即限制访问某个资源的线程个数,比如用于限制连接池的连接数. 打个通俗的比方,可以把 Semaphore 理解为 ...

  10. Python3 + requests + unittest接口测试

    一.缘 起 笔者最近完成了基于Python3 + requests + unittest的接口测试脚本,故在此做一下记录,于己为复盘,于彼为学习和参考 二.思 路 接口测试无非三步: 首先,造数据 - ...