2016-11-23

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2016-11-23相关的知识，希望对你有一定的参考价值。

CSS3实现2D效果-旋转 变大，移动

CSS文件里面的代码↓↓ css3-2D效果.css

/*设置全部div的属性*/
div{
    width:100px; /*设置宽度*/
    height:100px;/*设置高度*/
    background:red;/*设置背景颜色*/
    margin-left:50px;/*设置左外边框距离*/
    transition:all 1s; /*设置过度时间*/
    float:left;/*向左浮动*/
}
.div1:hover{
    transform:translate(100px);/*向右移动100px*/
}
.div2:hover{
    transform:rotate(360deg);/*设置旋转角度360°*/
}
.div3:hover{
    transform:scale(1.5,1.5);/*设置xy坐标，相当于向xy坐标扩大多少倍*/
}
.div4:hover{
    transform:skew(30deg,20deg);/*围绕 X 轴把元素翻转30度，围绕 Y 轴翻转 20 度*/
}

 

html里面的代码↓↓↓

<!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" xml:lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>css3-2D效果</title>
    <meta name="keywords" content="关键字列表" />
    <meta name="description" content="网页描述" />
    <link rel="stylesheet" type="text/css" href="css3-2D效果.css" />
    <style type="text/css"></style>
    <script type="text/javascript"></script>
</head>
<body>
    <div class="div1">2D转换translate</div>
    <div class="div2">2D转换rotate</div>
    <div class="div3">2D转换scale</div>
    <div class="div4">2D转换skew</div>
</body>
</html>

 

以上是关于2016-11-23的主要内容，如果未能解决你的问题，请参考以下文章

2016/11/23 学习总结

java_jdbc_oracle简单总结（2016-11-23）

每周代码及工作总结（第十周）

（第十一周）工作总结

每周例行报告

每周例行报告