css3常用属性之 skew翻转角度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body
{
font-size:24px;
color:#60F;}
div
{
width:200px;
height:115px;
background-color:yellow;
border:1px solid black;
}
#aa
{
transform:skew(30deg,0deg);
margin:50px;}
#bb
{
transform:skew(0deg,30deg);
margin:50px;}
#cc
{
transform:skew(30deg,30deg);
margin:50px;}
</style>
</head>

<body>
<div>你好。这是一个 div 元素。</div>

<div id="aa">这是将横向扭转30度的div,内部文字会跟随扭转</div>

<div id="bb">这是将纵向扭转30度的div,内部文字会跟随扭转</div>

<div id="cc">这是将横向扭转30度、纵向扭转30度的div,内部文字会跟随扭转</div>
</body>
</html>

时间: 2024-11-25 10:06:59

css3常用属性之 skew翻转角度的相关文章

CSS3 常用属性(一)-- 边框、背景

现今,界面极大的丰富,传统的 HTML+CSS 已经跟不上时代的步伐,在 CSS3 中,有太多非常好用的属性,可以很方便的做出种种炫酷的效果,接下来,我将例举一些常用的 CSS3 的属性. border-radius:圆角. border-radius : 50px ; /*四个角的圆角均为50px*/ border-radius : 50px 100px; /*左上右下的圆角是50px,左下右上的圆角是100px*/ border-radius : 10px 20px 30px 40px; /

CSS3 常用属性(三)-- 用户界面、文字、两种盒模型

用户界面--column 关于用户界面,我们先了解一下在块元素中写文字时,浏览器中的呈现情况,这个其实很明显,所有的文本内容会在块元素内从左到右一个个字排列,排满后,从上到下一排排渲染--然而,有些时候,页面需求的呈现方式是,类似于报纸似得,将一段文本内容,分成多列布局显示. 用户界面使用的示例如下: .font{ width:300px; height:300px; border:1px solid #000; margin:0px auto; column-count:3; /* 定义数量

css3常用属性

CSS3 动画属性(Animation) @keyframes //规定动画. animation //所有动画属性的简写属性,除了 animation-play-state 属性. animation-name //规定 @keyframes 动画的名称. animation-duration //规定动画完成一个周期所花费的秒或毫秒. animation-timing-function //规定动画的速度曲线. animation-delay //规定动画何时开始. animation-it

css3常用属性之表现型

本文来源:www.liteng.org如需转载请注明出处.否则将追究法律责任 版权归作者和博客园所有,请友情转载. css3的使用已经分布在各种网站上,其用途对于前端开发人员来说有很大的帮助,比如之前的圆角矩形,需要使用背景图片来完成,现在只需使用border-radius:5px;便可以做出圆角边框的效果,今天来记录下css3一些常用的属性. 盒子属性:边框圆角:radius,边框阴影:box-shadow 边框:border-radius:top-left top-right bottom-

css3常用属性animation-play-state的使用技巧

animation-play-state 属性规定动画正在运行还是暂停. div { animation-play-state:paused; -webkit-animation-play-state:paused; /* Safari 和 Chrome */ } 浏览器支持:Internet Explorer 10.Firefox 以及 Opera 支持 animation-play-state 属性.Safari 和 Chrome 支持替代的 -webkit-animation-play-s

CSS3 常用属性(四)-- 过渡、动画

过渡--transition 过渡这个属性的作用是当元素的样式发生变化时,使用动画的效果进行变化.有了过渡属性后,很多情况下,写一些简单效果,将不需要再借助 javascript 去计算. transition  过渡属性简写,可以设置四个值 transition-property 过渡的CSS的名字,或是all transition-duration  从一个状态到另一个状态的的时间 transition-timing-function 过渡效果的动画曲线,默认easy,linear是匀速,c

CSS3常用属性及用法

1.transition: 过渡属性,可以替代flash和javascript的效果 兼容性:Internet Explorer 9 以及更早的版本,不支持 transition 属性. Chrome 25 以及更早的版本,需要前缀 -webkit-. Safari 需要前缀 -webkit-. div { transition: width 1s linear 2s; /* Firefox 4 */ -moz-transition:width 1s linear 2s; /* Safari a

两点补充——CSS3新属性以及弹性布局

CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位] 1.px:像素.长度固定,表示分辨率占几个像素点: 2.%:表示相对于默认值的百分比: 3.em:长度与元素的字号挂钩. rem:长度与根元素的字号挂钩. 即与html 的 font-size 挂钩,若不设置,默认16px . [ em与rem区别 ] em与当前元素自身的font-size挂钩

CSS3动画属性Transform解读

无论你是前端还是设计师,相信你在网页二维空间上的操作早已经得心应手,JS处理时间线的动画也早已经 烂熟于胸.从今天开始,我跟大家分享一些“新”的东西,网页的第三个维度,以及纯CSS实现的动画.限于篇幅,从初级到比较复杂的3D动画大概会说个三四 个回合,我们就从最初级的东西开始说,由于这些知识大部分都是我个人根据文档所理解的,主要是当笔记.所以,也许会跟不少同学所理解的不太一样,甚至相 悖,我希望大家可以在文章下面指出不对的地方,我们共同来学习. 在我们以前使用绝对定位的时候就已经初步接触过Z轴,