<!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. MVC基本学习

    asp.net MVC ViewData详解 http://www.cnblogs.com/gaopin/archive/2012/11/13/2767515.html Asp.net MVC中的Vi ...

  2. HttpModule的认识与深入理解及MVC运行机制

    转自:http://kb.cnblogs.com/page/50130/ ASP.NET MVC架构与实战系列之二:理解MVC路由配置 http://www.cnblogs.com/jyan/arch ...

  3. hibernate之saveorupdate()、save()、update()都有什么区别

    saveorupdate()如果传入的对象在数据库中有就做update操作,如果没有就做save操作. save()在数据库中生成一条记录,如果数据库中有,会报错说有重复的记录. update()就是 ...

  4. SQL拆分多规则的字符串分离数字。

    --拆分多规则字符串 DECLARE @Codes NVARCHAR(MAX) SET @Codes = '6*BC-007,*BC-016,9*BC-015' --对于*BC-015这种情况,则Qt ...

  5. ADO.NET 快速入门（十二）：从 SQL Server 生成 XML 数据

    本文演示如何使用2种不同的方法从 SQL Server 生成 XML.   方法1:使用了 SqlCommand 的 ExecuteXmlReader 方法获取 XmlReader,然后使用 Data ...

  6. PowerShell管理IIS（新建站点、应用程序池、应用程序、虚拟目录等）

    #导入IIS管理模块 Import-Module WebAdministration #新建应用程序池 api.dd.com New-Item iis:\AppPools\api.dd.com Set ...

  7. Spring aop实现方式记录

    原文地址:http://blog.csdn.net/moreevan/article/details/11977115 Spring提供了两种方式来生成代理对象: JDKProxy和Cglib,具体使 ...

  8. 理解extern

    extern有两层含义:表示声明和extern C 1.C++分为编译期和运行期,C++是分别单独编译,编译期可认为有三个步骤:a.预编译进行文本替换,将源文件(cpp文件)生成编译单元:b.编译单元 ...

  9. android141 360 安装软件管理

                      主界面: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/andro ...

  10. 面试常备题---二叉树总结篇（zt)

    人生就像是一场长跑,有很多机会,但也得看我们是否能够及时抓牢,就像下面这样的代码: while(isRunning) { if(...){...} else if(...){...} ... else ...