实现效果：

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

实现代码：

<!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. 手机app抓包工具,安卓手机adb无线连接

    默认手机已经usb调试配置完成 网络必须在同一网络中,每次断开wifi连接,都必须重新重做一次 使用数据线连接电脑 cmd 打开一个命令行 输入 # abd如果没有配置环境变量,请配置或者进入adb文 ...

  2. Robotutor Scratch3.0 在线编程平台升级啦！

    Robotutor推出的Scratch3.0在线编程平台受到很多编程老师和学员的喜爱,上一个版本我们提供了用户注册,找回密码,个人项目的在线保存和浏览,社区分享评论. 我们根据实际的教学需要,用户角色 ...

  3. 【opencv系列02】OpenCV4.X图像读取与显示

    一.读取图片 opencv中采用imread() 函数读取图像 imread(filename, flags=None)     filename 图片的路径     flags 图像读取方式 ● c ...

  4. git版本控制系统小白教程（上）

    前言:本文主要介绍git版本控制系统的一些基础使用,适合小白入门,因为内容较多,会分为两部分进行分享. Git介绍 ​ Git是目前世界上最先进的分布式版本控制系统.并且它是一个开源的分布式版本控制系 ...

  5. Natas3 Writeup（爬虫协议robots.txt）

    Natas3: 页面提示本页面什么都没有. 在源码中发现提示:无信息泄露,谷歌这次不会发现它.提到了搜索引擎,猜测爬虫协议robots.txt中存在信息泄露,访问网站爬虫协议http://natas3 ...

  6. Ubuntu16.04安装QQ机器人

    Ubuntu安装QQ机器人 看了看现在QQ机器人似乎只有酷Q机器人有Docker可以在linux上运行了 那就k开始装酷Q机器人,资源占用也不是很大,大概占用180M内存吧 安装酷Q HTTP 首先安 ...

  7. python的进制转换

    转载于:https://www.cnblogs.com/FWF1944/p/11132409.html(方法论190404) Python整数能够以十六进制,八进制和二进制来编写,作为一般以10位基数 ...

  8. VirtualBox 安装 Centos8 使用 Xshell 连接

    1.下载CentOS CentOS下载地址:https://wiki.centos.org/Download 这里选择本地安装包,网络安装包在安装时需要在线下载资源比较慢 2.安装VirtualBox ...

  9. 2020.3.23 模拟赛游记 & 题解

    这次的模拟赛,实在是水. 数据水,\(\texttt{std}\) 水,出题人水,做题人也水.??? 游记就说一句: 水. T1 metro 弱智题. 人均 \(100pts\). #pragma G ...

  10. Anaconda常用命令收藏----后期还会更新

    一.更换jupyter notobook的打开目录 一般载在安装好Anaconda的时候,打开jupyter指向的目录一般是系统的根目录,如C:\Users\25282,但是这样的话对C盘是个不小的负 ...