CSS之perspective
<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
perspective:150;
-webkit-perspective:150;
} #div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: gray;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg);
}
</style>
</head> <body> <div id="div1">
<div id="div2">HELLO</div>
</div> </body>
</html>
run：
CSS之perspective的更多相关文章
- css3 视距-perspective
视距-用来设置用户与元素3d空间Z平面之间的距离. 实例1: HTML: <div class="perspective"> <h3&g ...
- css 简单梯形
通过css2D变形我们可以轻松得到平行四边形,那么通过此技巧可以得到梯形吗? no! 不过我们可以通过3D旋转得到类似这样的效果: transform:perspective(0.5em) rota ...
- 如何用纯 CSS 创作一个 3D 文字跑马灯特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/GdrrZq 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个金属光泽 3D 按钮特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此 ...
- 解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果
解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...
- CSS动效集锦，视觉魔法的碰撞与融合（三）
本文讲述的原理和相关demo 扇形DIV的使用——实现雷达扫描图 DIV环形布局—实现loading圈 动画的向量合成—实现抛物线动画 无限滚动动画—实现跑马灯效果 perspective和trans ...
- 前端每日实战：4# 视频演示如何用纯 CSS 创作一个金属光泽 3D 按钮特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此视频是可以 ...
- 前端每日实战：7# 视频演示如何用纯 CSS 创作一个 3D 文字跑马灯特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/GdrrZq 可交互视频教程 此视频是可以交 ...
- jQuery可拖拽3D万花筒旋转特效
这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...
随机推荐
- CloudStack 使用生态统计
http://shapeblue.com/
- ckeditor内容保存后显示问题
ckeditor保存到数据库中的数据是html格式,如果要在前台进行显示,需要采用${news.content },这样数据才能进行正常的显示,否则如果采用<s:property value=& ...
- Hadoop 2.0+YARN启动脚本分析与实战经验
start-all.sh脚本现在已经废弃,推荐使用start-dfs.sh和start-yarn.sh分别启动HDFS和YARN. 在新一代的Hadoop里面HDFS称为了统一存储的平台,而YARN成 ...
- 逐行读取txt
Dim fso, f1, ts, s Const ForReading = 1 Set fso = CreateObject("Scripting.FileSystemObject" ...
- 小菜学习MVC4-WebApi
今天想看下MVC4的东西,发现 居然有WebApi这东西,百度了一下..居然是 WCF中的东西,然后移植到了MVC4中,WCF你懂得返回数据都是xml,向网站这种请求 就比较纠结...而webapi可 ...
- 怎样拷贝整个目录并且忽略部分文件及目录(包括windows)
http://www.dewen.org/q/2150 rsync -a --exclude dir1 --exclude dir2 ... source target
- 算法优化:rgb向yuv的转化最优算法,快得让你吃惊!
朋友曾经给我推荐了一个有关代码优化的pdf文档<让你的软件飞起来>,看完之后,感受颇深.为了推广其,同时也为了自己加深印象,故将其总结为word文档.下面就是其的详细内容总结,希望能于己于 ...
- nginx 学习八 高级数据结构之基数树ngx_radix_tree_t
1 nginx的基数树简单介绍 基数树是一种二叉查找树,它具备二叉查找树的全部长处:检索.插入.删除节点速度快,支持范围查找.支持遍历等. 在nginx中仅geo模块使用了基数树. nginx的基数树 ...
- Objective-C语法之NSArray和NSMutableArray
转自:http://www.cnblogs.com/stoic/archive/2012/07/09/2582773.html Objective-C的数组比C++,Java的数组强大在于,NSArr ...
- UNIX标准化及实现之POSIX标准必需头文件
POSIX标准定义的必需头文件 头文件 说明 <dirent.h> 目录项 <fcntl.h> 文件控制 <fnmatch.h> 文件名匹配类型 <glob. ...