<!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. JQuery要点（一）

    简介: jQuery Mobile 是用于创建移动 Web 应用的前端开发框架. jQuery Mobile 可以应用于智能手机与平板电脑. jQuery Mobile 使用 HTML5 & ...

  2. SQL SERVER 2008/2012/2012R2/2014 设置开启远程连接（sa配置）

    本文方案适用于Microsoft Sql Server 2008/2012/2012 r2/2014版本,以下简称MSSQLSERVER. MSSQL默认是不允许远程连接,并且禁用sa账户的.如果想要 ...

  3. Linux下的图形界面——X Window的安装

    X Window即X Windows图形用户接口,是一种计算机软件系统和网络协议,提供了一个基础的图形用户界面(GUI)和丰富的输入设备能力联网计算机.其中软件编写使用广义的命令集,它创建了一个硬件抽 ...

  4. 【博客迁移】hityixiaoyang.com

    用了快两年简洁的cnblog现在迁移到新域名空间:http://blog.apluslogicinc.com 欢迎来踩啊~~~

  5. Codeforces Round #330 (Div. 2) A. Vitaly and Night 暴力

    A. Vitaly and Night Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/595/p ...

  6. 在VS2012下不安装VS2010编译VS2010的工程

    虽然一路追随这VISUAL SUTDIO在编程,但是断档的情况还是有的,最近一次硬盘问题使得安装了所有的VS2003-VS2012的机器硬盘挂了,无奈只能够安装了,不过觉得没啥用了,就安装一个VS20 ...

  7. int a[5]={}, &a+1与(int*)a+1的区别

    #include <iostream> #include <typeinfo> using namespace std; int main() { int b, *pb; ch ...

  8. Python学习 之 异常

    1.python中处理异常的方式 #coding:utf8 filename=raw_input("请输入你要操作的文件") try: f=open(filename) print ...

  9. SqlServer2008 之 应用积累

    1.断开数据库连接,在原有查询窗口(断开数据库连接的未关闭查询窗口),对现在所连数据库进行操作,结果是对已断开数据库的误操作. 正确操作:重新连接数据库后,应关闭原有查询窗口,新建查询窗口后再执行操作 ...

  10. Starship Troopers

    Problem Description You, the leader of Starship Troopers, are sent to destroy a base of the bugs. Th ...