<!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. 如何使用C#去灰度化一幅图像

    灰度化一幅图像就是将图像的色彩信息全部丢掉,将24位的位图信息,用8位来表示,灰度图共有256级灰度等级,也就是将24位位图的一点如(255,255,255)转换成255,所以R,G,B三个值所乘的系 ...

  2. Cocos2d-x——Cocos2d-x 屏幕适配新解 – 兼容与扩展【转载】

    Cocos2d-x 屏幕适配新解 – 兼容与扩展 本文出自[无间落叶](转载请保留出处):http://blog.leafsoar.com/archives/2013/05-13-08.html 在读 ...

  3. IOC运用到MVC中

    IOC可以摒弃掉类中类的紧耦合,让设计和重用更简单,将IOC加入到MVC中的实现非常简单,那么有哪几种方法?它们的实现又是什么原理呢? IOC在MVC中的注入,主要是在获取Controller对象中实 ...

  4. [Selenium]中使用css选择器进行元素定位

    参考:http://www.cnblogs.com/webblog/archive/2009/07/07/1518274.html 常见语法 * 通用元素选择器,匹配任何元素 E 标签选择器,匹配所有 ...

  5. Struts2常量的具体用法实例(一)

    XML代码: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC ...

  6. C++ 中复杂的声明

    1.方法也是有类型的,方法的类型由返回类型和形参表决定.比如int F (int)的类型就是去掉方法名,int (int). 2.对于方法类型,在返回类型和形参表之间,加上一个名称F,就表示一个特定的 ...

  7. cdoj 1256 昊昊爱运动 预处理/前缀和

    昊昊爱运动 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/show/1256 Descr ...

  8. ListView删除选中的多项目

    //ListView删除选中的多项目function DeleteMultSelItems(ListView:TListView):Boolean;var  I: Integer;begin  Res ...

  9. password安全之动态盐

    首先,我们看看什么是盐:http://zh.wikipedia.org/zh/%E7%9B%90_%28%E5%AF%86%E7%A0%81%E5%AD%A6%29 ,再MD5是d16e970d6e5 ...

  10. 使用Active MQ在.net和java系统之间通信

    ActiveMQ 是Apache出品,最流行的,能力强劲的开源消息总线.ActiveMQ 是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Provider实现 一.特性列表 ⒈ 多种语言和 ...