css3实现的将页面倾斜一定的角度

css3实现的将页面倾斜一定的角度:
利用CSS3可以轻松实现将页面倾斜一定的角度,下面就是实例代码。

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
body{
  -webkit-transform:rotate(2deg);
  -moz-transform:rotate(2deg);
  -o-transform:rotate(2deg);
  padding:50px;
}
</style>
</head>
<body>
蚂蚁部落欢迎您
</body>
</html>

上面代码实现了我们的要求,只要对transform属性比较属性,那实现起来就没有任何问题。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11914

更多内容可以参阅:http://www.softwhy.com/divcss/

时间: 2024-08-10 15:09:49

css3实现的将页面倾斜一定的角度的相关文章

jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件

插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转.翻转.放大缩小等动画特效.使用Smoove页面滚动元素动画特效插件可以很轻松的制作出各种华丽的CSS3动画效果. 基本用法 $('.smoove').smoove(options); 上面的代码会在class为 smoove 的元素上使用默认参数初始化 jQuery Smoove. 你可以通过dat

jQuery和CSS3炫酷滚动页面内容元素动画特效

jquery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转.翻转.放大缩小等动画特效. 使用Smoove页面滚动元素动画特效插件可以很轻松的制作出各种华丽的CSS3动画效果. 在线演示:http://www.htmleaf.com/Demo/201503021449.html 下载地址:http://www.htmleaf.com/jQuery/Layout-Inter

CSS3(四)页面布局大全

目录 一.负边距与浮动布局 1.1.负边距 1.1.1.向上移动 1.1.2.去除列表右边框 1.1.3.负边距+定位,实现水平垂直居中 1.1.4.去除列表最后一个li元素的border-bottom 1.2.双飞翼布局 1.3.多栏布局 1.3.1.栅格系统 1.3.2.多列布局 二.弹性布局(Flexbox) 三.流式布局(Fluid) 三.瀑布流布局 3.1.常见瀑布流布局网站 3.2.特点 3.3.masonry实现瀑布流布局 3.3.1.下载并引用masonry 3.3.2.准备内容

jQuery和CSS3超酷3D页面切换导航菜单插件

这是一款效果非常酷的jQuery和CSS3 3D页面切换导航菜单特效插件.该导航菜单插件是汉堡包隐藏菜单,每个菜单项的图标使用SVG来制作,鼠标滑过图标时有动画效果,点击某一个菜单项后,页面会在3D空间进行切换,效果非常炫酷. 效果演示:http://www.htmleaf.com/Demo/201504111660.html 下载地址:http://www.htmleaf.com/jQuery/Menu-Navigation/201504111659.html

使用css3属性transition实现页面滚动

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>慕课七夕主题</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"&g

CSS3中webkit-box布局页面实例

之前布局都是用float布局或者是display:inline-block;+width:**%:来计算,所以都不是真正意义上的流布局: 接下来的实例能完整的教给大家如何建立CSS3当中的流布局(以chrome为例) 三列自适应布局 <!DOCTYPE html> <html>  <meta charset="utf-8″ /> <style>  .wrap {   display: -webkit-box;   -webkit-box-orien

从数据库、页面加载速度角度思考 id设计 sku asin

w 超值套装 [小米红米4A][超值套装]小米 红米 4A 全网通 2GB内存 16GB ROM 香槟金色 移动联通电信4G手机 双卡双待[行情 报价 价格 评测]-京东  https://item.jd.com/4891234.html#crumb-wrap [小米红米4A][超值套装]小米 红米 4A 全网通 2GB内存 16GB ROM 玫瑰金色 移动联通电信4G手机 双卡双待[行情 报价 价格 评测]-京东  https://item.jd.com/4096723.html#crumb-

用CSS3动画特效实现弹窗效果

提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了. CSS3特殊效果 CSS3为用户添加了三个特殊效果的处理方式:过渡.动画.变化.当用户和界面元素交互时,使用这些特殊样式可大大改善用户的体验效果.这些效果直接由浏览器引擎处理,可以节省开销.尽管如此,它们也会耗费大量的处理能力,尤其是一些复杂的WEB页面上.即使是最基本的效果,也是如此.本篇的目的只是熟悉下这三种CSS处理效果,不推荐在实际系统中大篇幅使用. 温馨提示:请谨慎大篇幅使用这些

CSS3各个模块详解

一, CSS3 盒子 阴影 属性 box- shadow 也是 CSS3 新增 的 一个 重要 属性, 用来 定义 元素 的 盒子 阴影. inset: 阴影 类型, 可选 值. 如果不 设置, 其 默认 的 投影 方式 是 外 阴影: 如果 取其 唯一 值" inset", 就是 给 元素 设置 内 阴影. x- offset: 阴影水平偏移量, 其值可以是正负值. 如果取正值, 则 阴影 在 元素 的 右边, 反之 取 负值, 阴影 在 元素 的 左边. y- offset: 阴影