码迷,mamicode.com
首页 > Web开发 > 详细

HTML学习笔记 cs2D3D展示基础 第十四节 (原创) 参考使用表

时间:2017-09-17 16:26:25      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:tle   ble   for   utf-8   使用   原创   eps   log   偏移量   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <link rel="stylesheet" href="tzy.css" type="text/css">
</head>
<body>
<div>初始效果div1</div>
<br/>
<div class="div2">展示div2</div>
<br/>
<div class="div3">展示div3</div>
<br/>
<div class="div4">展示div4</div>
<br/>
<div class="div5">展示div5</div>
<br/>
<div class="div6">展示div6</div>
<br/>
<div class="div7">展示div7</div>
<br/>
<div class="div8">展示div8</div>
</body>
</html>
div{
    width:100px;
    height:100px;
    background-color: deepskyblue;
    border: double;
    margin: 30px;
}
.div2{
    /*移动*/
    transform: translate(200px,100px);/*现在chrome有效果*/
    -webkit-transform: translate(200px,100px);/*safari chrome*/
    -ms-transform: translate(200px,100px);/*IE*/
    -o-transform: translate(200px,100px);/*opera*/
    -moz-transform: translate(200px,100px);/*Firefox*/
}

.div3{
    /*旋转 */
    -webkit-transform: rotate(200deg);
    -moz-transform: rotate(200deg);
    -ms-transform: rotate(200deg);
    -o-transform: rotate(200deg);
    transform: rotate(200deg);
}

.div4{
    /*缩放(宽度,高度)倍数*/
    -webkit-transform: scale(1,2);
    -moz-transform: scale(1,2);
    -ms-transform: scale(1,2);
    -o-transform: scale(1,2);
    transform: scale(1,2);
}
.div5{
    /*倾斜度数下x,y轴*/
    -webkit-transform: skew(20deg,50deg);
    -moz-transform: skew(20deg,50deg);
    -ms-transform: skew(20deg,50deg);
    -o-transform: skew(20deg,50deg);
    transform: skew(20deg,50deg);
}
.div6{
    /*矩阵(利用矩阵算出偏移量)http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/*/
    -webkit-transform: matrix(1, 0, 0, 1, 200, 100);
    -moz-transform: matrix(1, 0, 0, 1, 200, 100);
    -ms-transform: matrix(1, 0, 0, 1, 200, 100);
    -o-transform: matrix(1, 0, 0, 1, 200, 100);
    transform: matrix(1, 0, 0, 1, 200, 100);
}
.div7{
    /*3d转换*/
    -webkit-transform: rotateX(120deg);
    -moz-transform: rotateX(120deg);
    -ms-transform: rotateX(120deg);
    -o-transform: rotateX(120deg);
    transform: rotateX(120deg);
}
.div8{
    /*3d转换*/
    -webkit-transform: rotateY(120deg);
    -moz-transform: rotateY(120deg);
    -ms-transform: rotateY(120deg);
    -o-transform: rotateY(120deg);
    transform: rotateY(120deg);
}

 

HTML学习笔记 cs2D3D展示基础 第十四节 (原创) 参考使用表

标签:tle   ble   for   utf-8   使用   原创   eps   log   偏移量   

原文地址:http://www.cnblogs.com/ttzzyy/p/7535872.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!