3D转换加上透视效果
来源：互联网 发布：stm32用什么软件编程 编辑：程序博客网 时间：2024/06/03 22:49
CSS3的3D转换加上透视效果。
截图：
代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>3D转换练习</title>
<style type="text/css">
div{
width: 120px;
height: 120px;
border: solid 1px #000;
margin: 50px auto;
perspective: 400px;/*透视的效果，必须给父元素加*/
}
/*图片3D变化*/
div:hover img{
transform: rotateX(60deg);/*X轴旋转60度*/
transition: all 0.5s;
}
#table1{
width: 300px;
height: 300px;
margin: 30px auto;
background-color: black;
perspective: 500px;/*透视的效果，必须给父元素加*/
}
table{
margin: 30px auto;
}
/*图片3D变化*/
#table1:hover table{
transform: rotateX(40deg);/*X轴旋转60度*/
transition: all 0.5s;
}
</style>
</head>
<body>
<div><img src="images\userHead.jpg"></div>
<div id="table1">
<table width="300" border="1" cellspacing="0" cellpadding="0">
<tr>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
- 3D转换加上透视效果
- HTML5+CSS3+JS学习笔记-12-使用JS及函数来制作表格加上3D透视效果
- JS伪3D 图形透视效果
- 三维效果（透视转换）
- 3D数学透视投影
- perspective 3D透视简介
- CSS3 3D旋转透视
- 【UWP通用应用开发】编辑文本、绘制图形、3D透视效果及绘制时钟实战
- 3d转换（立方体旋转效果）
- 透视效果
- 透视转换
- 3d透视投影函数的理解
- Silverlight 3D Effects(透视变形)
- perspective(3D透视属性)属性体验
- 3D图形学中的透视投影变换 ppt
- HTML5和CSS3实现3D转换效果 CSS3的3D效果
- 为OpenOffice.org安装3D转换效果的插件
- 新闻列表（手风琴效果 CSS3 3D转换）特效代码
- android五中数据传递方式
- python入门学习教程之dictionary（字典）
- Spring入门之setter DI注入
- 你所不知道的 Console
- OkHttp简单的请求
- 3D转换加上透视效果
- Android WebView最简单使用
- 编程之美 寻找发帖水王
- codeblocks快捷键
- Java----萌新的小知识
- Android Button 边框、圆角、点击效果
- GoogleMap----android篇（1）
- PATA1009
- 基于BeautifulSoup爬取豆瓣网上的电影信息
