旋转
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>css3</title>
<style>
#div1{
width:100px;height: 100px; background: yellow;
}
#div2{
width:100px;height: 100px; background: yellow;
transform: rotate(30deg);
-ms-transform: rotate(30deg);/*ie9*/
-moz-transform: rotate(30deg);/*FirFox*/
-webkit-transform: rotate(30deg);/*Safari and Chrome*/
-o-transform:rotate(30deg); /* Opera */
}
/* border-image :ie下全不支持*/
#round,
#stretch {
border: 15px solid transparent;
width: 300px;
padding: 10px 20px;
}
#round {
-moz-border-image: url(http://www.w3school.com.cn//i/border.png) 30 30 round;/* Old Firefox */
-webkit-border-image: url(http://www.w3school.com.cn//i/border.png) 30 30 round;/* Safari and Chrome */
-o-border-image: url(http://www.w3school.com.cn//i/border.png) 30 30 round;/* Opera */
border-image: url(http://www.w3school.com.cn//i/border.png) 30 30 round;
}
#stretch {
-moz-border-image: url(http://www.w3school.com.cn//i/border.png) 30 30 stretch;/* Old Firefox */
-webkit-border-image: url(http://www.w3school.com.cn//i/border.png) 30 30 stretch;/* Safari and Chrome */
-o-border-image: url(http://www.w3school.com.cn//i/border.png) 30 30 stretch;/* Opera */
border-image: url(http://www.w3school.com.cn//i/border.png) 30 30 stretch;
}
#t_w
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
#t2
{
background-color:yellow;
border:1px solid black;
transform:translate(50px,20px);
-ms-transform:translate(50px,20px); /* IE 9 */
-moz-transform:translate(50px,20px); /* Firefox */
-webkit-transform:translate(50px,20px); /* Safari and Chrome */
-o-transform:translate(50px,20px); /* Opera */
}
#s_before{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
#s_after{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
margin:100px;
transform: scale(2.5);
-ms-transform:scale(2.5); /* IE 9 */
-moz-transform:scale(2.5); /* Firefox */
-webkit-transform:scale(2.5); /* Safari and Chrome */
-o-transform: scale(2,5); /* Opera */
}
#skew_before{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
#skew_after {
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
transform: skew(30deg,20deg);
-ms-transform:skew(30deg,20deg); /* IE 9 */
-moz-transform:skew(30deg,20deg); /* Firefox */
-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
}
#trans{
width:100px;
height:75px;
background-color:yellow;
transition: width 2s;
-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;
}
#trans:hover{
width:300px;
}
#trans2{
width:200px;
height:175px;
background-color:yellow;
transition: width 2s, height 2s ;
-moz-transition: width 2s, height 2s,-moz-transform 2s;;
-webkit-transition: width 2s, height 2s,-webkit-transform 2s;;
-o-transition: width 2s, height 2s,-o-transform 2s;;
}
#trans2:hover{
width:400px;
height:400px;
transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
}
</style>
</head>
<body>
<!--(一) rotate(30deg); 旋转 rotateX(130deg) rotateY(130deg)-->
<div id="div1">
<p>你好，这是一个div元素</p>
</div>
<div id="div2">
<p>你好，这是一个div元素</p>
</div>
<!-- (二) border-radius
box-shadow
border-image-->
<div id="div3">
<div id="round">在这里，图片铺满整个边框。</div>
<br>
<div id="stretch">在这里，图片被拉伸以填充该区域。</div>
<p>这是我们使用的图片：</p>
<img src="http://www.w3school.com.cn/i/border.png">
<p><b>注释：</b> Internet Explorer 不支持 border-image 属性。</p>
<p>border-image 属性规定了用作边框的图片。</p>
</div>
<!--(三)背景
background-size/*规定背景图片的尺寸。*/
background-origin/*规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。*/
background-image:url(bg_flower.gif),url(bg_flower_2.gif);/* 允许您为元素使用多个背景图像。*/
-->
<!--(四)CSS3 文本效果
text-shadow(文本阴影)
word-wrap(word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分：)
eg:p {word-wrap:break-word;}
(Internet Explorer 10、Firefox、Chrome、Safari 以及 Opera 支持 text-shadow 属性。所有主流浏览器都支持 word-wrap 属性。
注释：Internet Explorer 9 以及更早的版本，不支持 text-shadow 属性。
)
-->
<!--(五)CSS3 字体
<style>
@font-face
{
font-family: myFirstFont;
src: url('/example/css3/Sansation_Light.ttf')
,url('/example/css3/Sansation_Light.eot'); /* IE9+ */
}
</style>
-->
<!--(六)css3 2D 转换
translate()移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
rotate()旋转
scale()元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：扩大或缩小
skew()
matrix()把所有 2D 转换方法组合在一起。matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
-->
<div id="t_w">
<div id="t">你好。这是一个 div 元素。</div>
<div id="t2">你好。这是一个 div 元素。</div>
</div>
<br/>
<br/>
<br/>
<br/>
<div id="s_before"> scale</div>
<div id="s_after">scale</div>
<br/>
<br/>
<br/>
<div id="skew_before">skew</div>
<div id="skew_after">skew</div>
<!--(七)css3 3D 转换
rotateX()
rotateY()
-->
<!--(八)transition (过渡) -->
<div id="trans"> </div><br/>
<div id="trans2"> 请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。 </div>
<!--(九))动画
@keyframes name(随便名字)
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes name /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes name /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes name /* Opera */
{
from {background: red;}
to {background: yellow;}
}
div
{
animation: name 5s;
-moz-animation: name 5s; /* Firefox */
-webkit-animation: name 5s; /* Safari 和 Chrome */
-o-animation: name 5s; /* Opera */
} -->
<!--(九)CSS3 多列
column-count规定元素应该被分隔的列数
column-gap规定列之间的间隔：
column-rule设置列之间的宽度、样式和颜色规则。
-->
<!--(十)
resize是否可由用户调整元素尺寸。resize:both;
box-sizing允许您以确切的方式定义适应某个区域的具体内容。
outline-offset对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。border:2px solid black;outline:2px solid red;outline-offset:15px; 在边框边缘之外 15 像素处有一个轮廓。
-->
</body>
</html>
