CSS3实现3D转换
实现效果：
当鼠标悬停在图片上面时，图片发生翻转，文案出来，鼠标取消之后就又恢复
实现代码：
<!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转换的更多相关文章
- CSS自学笔记（13）:CSS3 2D/3D转换
CSS3中新增了对元素进行2D和3D的转换效果,这样可以是开发人员很方便的做出视觉效果更好的网页来. 通过CSS3中属性的定义,我们可以对元素进行移动.缩放.拉伸.旋转等等,可以通过定义transfo ...
- HTML5和CSS3实现3D转换效果 CSS3的3D效果
上次,我们一起研究了css3的2d模块,这次我们一起来看一下css3的3d模块. 首先,我们来了解一下3d的坐标系,x轴在屏幕上为水平方向,y轴为垂直方向,而z轴为垂直于屏幕的方向. 不理解的话可以参 ...
- CSS3：3D转换
几个突破口:(为了更简洁理解,先忽略兼容) 1.认识3D的坐标系 rotateX()-----------元素绕X轴旋转 rotateY() -----------元素绕Y轴旋转 rotateZ() ...
- CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)
CSS3边框: 1.CSS3圆角:border-radius 属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...
- CSS笔记（十二）CSS3之2D和3D转换
参考:http://www.w3school.com.cn/css3/css3_2dtransform.asp 2D Transform 方法 函数 描述 matrix(n,n,n,n,n,n) 定义 ...
- CSS3 3D转换
CSS3允许你使用3D转换来对元素进行格式化. 3D转换方法: rotateX() rotateY() 浏览器支持 属性 浏览器支持 transform IE10和Firefox支 ...
- css3 2d转换3d转换以及动画的知识点汇总
css3 2d转换 2d转换的方法: 1.移动 translate(x, y) 可以改变元素的位置,x.y可为负值: 2.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x.y的取值 ...
- css3动画2D、3D转换
css3动画的2D.3D转换代码: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 前端笔记之HTML5&CSS3（下）2D/3D转换&animate动画
一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...
随机推荐
- 关于地址栏url的一些小结
1.获取整个地址栏地址 //获取整个地址栏地址 var href = window.location.href; console.log(href); 以上代码就是获取整个url地址 2.获取url协 ...
- 前端开发--nginx番外篇
Centos7下Nginx开发使用(背景: 阿里云ECS Centos7) 安装和启动 安装教程 Centos7安装Nginx实战 需要主意的如下: 文中第四步 4.配置编译参数命令:(可以使用./c ...
- C++ const用法，看这一篇就够了！
本文主要介绍const修饰符在C++中的主要用法,下面会从两个方面进行介绍:类定义中使用const.非类定义中使用const 1. 非类定义中使用const 非类定义中使用const是指:在除了类定义 ...
- 使用openxml提取word中的文本和图片并转为Html
使用openxml提取word中的文本和图片 使用 openXml 提取 word 中的 Text 和 Drawing 使用 openXml 将 word 中的文本和图片转为Html 使用 openX ...
- asp.net mvc core 管道以及拦截器初了解
今天来看一下asp.net core的执行管道.先看下官方说明: 从上图可以抛光,asp.net core的执行顺序是,当收到一个请求后,request请求会先经过已注册的中间件,然后会进入到mvc的 ...
- call 和 apply 和 bind的区别
有些东西说忘就往,每天记录自己忘记的东西重新学习一遍,挺好 作用:call()和apply()用法都是一样的,改变this的指向问题 区别:接收参数的方式不同, (bind 方法是附加在函数调用后面使 ...
- npm run build时卡住不动了...
在build文件夹里有个check-versions.js. if (shell.which('npm')) { versionRequirements.push({ name: 'npm', cur ...
- Linux安装Elasticsearch7.x
Elasticsearch下载地址: https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-7.1.1-linux-x8 ...
- django 和 七牛云 交互
django 和 七牛云 交互 七牛开发文档 安装 pip install qiniu 初始化 # access_key 个人中心的 ak # secret_key 个人中心的 sk from qin ...
- 从零搭建Spring Cloud Gateway网关（二）—— 打印请求响应日志
作为网关,日志记录是必不可少的功能,可以在网关出增加requestId来查询整个请求链的调用执行情况等等. 打印请求日志 打印请求日志最重要的就是打印请求参数这些东西,不过RequestBody通常情 ...