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 ...
随机推荐
- SPI总线传输的4种模式
概述 在芯片的资料上,有两个非常特殊的寄存器配置位,分别是 CPOL (Clock POlarity)和 CPHA (Clock PHAse). CPOL配置SPI总线的极性 CPHA配置SPI总线的 ...
- iview2+ 表单密码验证
<Form :model="formItem" v-model="formItem.id" ref="formItem" :label ...
- CVPR 2020 全部论文 分类汇总和打包下载
CVPR 2020 共收录 1470篇文章,根据当前的公布情况,人工智能学社整理了以下约100篇,分享给读者. 代码开源情况:详见每篇注释,当前共15篇开源.(持续更新中,可关注了解). 算法主要领域 ...
- Linux定制化RPM包
定制化RPM包 1.Linux安装软件方法 1- rpm/yum安装 简单.速度快,但是不能定制安装 RPM RedHat Package Manager(RPM软件包管理器) 2- 二进制安装 解压 ...
- 为.net Core 3.0 WebApi 创建Linux守护进程
前言 我们一般可以在Linux服务器上执行 dotnet <app_assembly.dll> 命令来运行我们的.net Core WebApi应用.但是这样运行起来的应用很不稳定,关闭终 ...
- selenium 爬boss
# 有问题 from selenium import webdriver import time from lxml import etree class LagouSpider(object): d ...
- JS中的call()方法和apply()方法用法总结（挺好 转载下）
最近又遇到了JacvaScript中的call()方法和apply()方法,而在某些时候这两个方法还确实是十分重要的,那么就让我总结这两个方法的使用和区别吧. 1. 每个函数都包含两个非继承而来的方法 ...
- Android NDK JNI 入门笔记-day04-NDK实现Hash算法
* Android NDK JNI 入门笔记目录 * 开头 前面的学习,我们已经掌握了 NDK 开发的必备知识. 下一步就要多实践,通过创造问题并解决问题,来增加熟练度,提升经验. 日常开发中,经常会 ...
- Python专题——详解enumerate和zip
本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是Python专题的第7篇文章,我们继续介绍迭代相关. enumerate 首先介绍的是enumerate函数. 在我们日常编程的过程当 ...
- Spring框架——IOC 工厂方法
IoC 是典型的⼯厂模式,如何使⽤用⼯厂模式创建 bean, IoC 通过⼯厂模式创建 bean 有以下两种⽅式 xml <?xml version="1.0" encodi ...