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 ...
随机推荐
- GZOJ 1361. 国王游戏【NOIP2012提高组DAY1】
国王游戏[NOIP2012提高组DAY1] Time Limit:1000MS Memory Limit:128000K Description 国王游戏(game.cpp/c/pas) [问题描述] ...
- 数据分析你需要知道的操作：ETL和ELT
如果您接触过数据仓库, 您可能会使用 ETL (Extract. Transform. Load) 或 ELT ( Extract.Load. Transform) 将您的数据从不同的来源提取到数据仓 ...
- Nuxt简单使用Google/Baidu Analyze
博客地址: https://www.seyana.life/post/17 具体账号注册方法和绑定方法可以去到官网下,都有相应的指南, 一般设置也比较简单,只需要把对应js代码添加到head中即可, ...
- Function.prototype.call.apply()方法
在看uncurrying化函数时候,碰到了Function.prototype.call.apply()的用法: 先说说uncurrying()函数: Function.prototype.uncur ...
- var， let ，const区别
ES6中加入了let,const字符,先说说新的区别: 作用域:let 声明的变量只在它所在的代码块内有效,而且不存在变量提升,即变量可以在声明之前使用,值为undefined.let未声明变量前会报 ...
- Docker Compose + Traefik v2 快速安装， 自动申请SSL证书 http转https 初次尝试
前言 昨晚闲得无聊睡不着觉,拿起服务器尝试部署了一下Docker + Traefik v2.1.6 ,以下是一些配置的总结,初次接触,大佬勿喷. 我的系统环境是 Ubuntu 18.04.3 LTS ...
- C语言二进制拼接 （整数和byte类型的字符串拼接）
#include <iostream>#include <cstring>#include <cstdio> using namespace std; typede ...
- vue 接口 对象数组的传入传出
数组传入 对象的话用{...obj} <selectFile :tableData="[...tableData]" @uploadSuccess="data =& ...
- iview-admin里面的 axios 给包装了一层数据 libs/axios.js 数据做了一层拦截
interceptors (instance, url) { // 请求拦截 instance.interceptors.request.use(config => { // 添加全局的load ...
- 项目中 关于localstorage、cookie的坑？明明设置了本地存储为什么没生效
1.简单的介绍一下localStorage,sessionStorage,cookie localStorage:仅在客户端存储不参与服务器通信,存储大小一般为5M,如果不是人为清除,那么即使是关闭浏 ...