<!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的更多相关文章

  1. css3 视距-perspective

           视距-用来设置用户与元素3d空间Z平面之间的距离. 实例1:       HTML: <div class="perspective"> <h3&g ...

  2. css 简单梯形

    通过css2D变形我们可以轻松得到平行四边形,那么通过此技巧可以得到梯形吗? no! 不过我们可以通过3D旋转得到类似这样的效果: transform:perspective(0.5em)  rota ...

  3. 如何用纯 CSS 创作一个 3D 文字跑马灯特效

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/GdrrZq 可交互视频教程 此视 ...

  4. 如何用纯 CSS 创作一个金属光泽 3D 按钮特效

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此 ...

  5. 解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果

    解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...

  6. CSS动效集锦，视觉魔法的碰撞与融合（三）

    本文讲述的原理和相关demo 扇形DIV的使用——实现雷达扫描图 DIV环形布局—实现loading圈 动画的向量合成—实现抛物线动画 无限滚动动画—实现跑马灯效果 perspective和trans ...

  7. 前端每日实战：4# 视频演示如何用纯 CSS 创作一个金属光泽 3D 按钮特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此视频是可以 ...

  8. 前端每日实战：7# 视频演示如何用纯 CSS 创作一个 3D 文字跑马灯特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/GdrrZq 可交互视频教程 此视频是可以交 ...

  9. jQuery可拖拽3D万花筒旋转特效

    这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...

随机推荐

  1. 通过克隆MAC地址 破解网通电信封路由

    通过克隆MAC地址 破解网通电信封路由 电信封路由方法一:先确定申请上网的电脑单机状态下已经能够上网.就说明该电脑网卡的MAC地址是合法的MAC地址.进入系统的MSDOS方式,发布ipconfig/a ...

  2. PC/UVa 题号: 110105/10267 Graphical Editor （图形化编辑器）题解

    #include<cstdio> #include<iostream> #include<string> #include<algorithm> #in ...

  3. 最小投票BZOJ 1934([Shoi2007]Vote 善意的投票-最小割)

    上班之余抽点时间出来写写博文,希望对新接触的朋友有帮助.今天在这里和大家一起学习一下最小投票 1934: [Shoi2007]Vote 好心的投票 Time Limit: 1 Sec Memory L ...

  4. hdu 4494 Teamwork 最小费用最大流

    Teamwork Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=4494 ...

  5. Codeforces Beta Round #51 B. Smallest number dfs

    B. Smallest number Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/55/pro ...

  6. [置顶] 异步加载图片，使用LruCache和SD卡或手机缓存，效果非常的流畅

    转载请注明出处http://blog.csdn.net/xiaanming/article/details/9825113 异步加载图片的例子,网上也比较多,大部分用了HashMap<Strin ...

  7. oracle_partition sample_simple

    一:范围分区 就是根据数据库表中某一字段的值的范围来划分分区,例如: create table graderecord ( sno varchar2(10), sname varchar2(20), ...

  8. win7引导项顺序

    转载:http://jingyan.baidu.com/article/72ee561aa1d123e16138df81.html 问题描述: 个人在宿舍使用的比较多的是Window 7,而它的启动项 ...

  9. 使用c3p0连接池

    首先我们需要知道为什么要使用连接池:因为jdbc没有保持连接的能力,一旦超过一定时间没有使用(大约几百毫秒),连接就会被自动释放掉,每次新建连接都需要140毫秒左右的时间而C3P0连接池会池化连接,随 ...

  10. JavaScript之对数组中元素进行增删改

    JavaScript中数据类型无非是:简单类型+复杂类型,什么是简单什么又是复杂.从电脑物理存储上讲,简单就是所见即所得,你看见什么,电脑里面存的就只是什么,并不会因为一些关系(比如引用)而多出一部分 ...