zoukankan html css js c++ java

CSS3学习手记（6） CSS3装换 2D转换

CSS 2D转换

CSS3 rotate() 旋转
CSS3 translate() 平移
CSS3 scale() 缩放
CSS3 skew() 扭曲或斜切
CSS3 matrix() 矩阵或混合

旋转rotate

通过指定的角度参数对原元素指定一个2D rotation(2D旋转 )

语法：transform:rotate(<angle>)

参数说明：angle指旋转角度，正数表示顺时针旋转，负数表示逆时针旋转

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
      *{margin: 0;padding: 0;list-style-type: none;}
      a,img{border: 0;}
      body{font:12px/180% Arial;}
      .main{width: 1000px;margin: 50px auto;position: relative;}
      .pic{width: 300px;height: 290px;border: 1px solid #ccc; background: #fff;box-shadow: 2px 2px 3px #aaa}
      .pic1{transform:rotate(7deg)}
      .pic2{transform:rotate(-8deg)}
      .pic3{position: absolute;top:40px;left: 350px;z-index: 2;transform: rotate(-35deg)}
      .pic4{position: absolute;top: 360px;left: 350px;z-index: 3;transform: rotate(35deg)}
      .pic5{position: absolute;top: 360px;left:350px;z-index: 4;transform: rotate(60deg)}
      .pic6{position: absolute;top: 180px;left: 280px;z-index: 5;transform: rotate(-60deg)}
        </style>
       
    </head>
    <body>
     <div class="main">
         <div class="pic pic1"><img src="images/1.jpg" style="300px;height:200px"><p>2D装换</p></div>
         <div class="pic pic2"><img src="images/3.jpg" style="300px;height:200px"><p>2D装换</p></div>
         <div class="pic pic3"><img src="images/4.jpg" style="300px;height:200px"><p>2D装换</p></div>
         <div class="pic pic4"><img src="images/5.jpg" style="300px;height:200px"><p>2D装换</p></div>
         <div class="pic pic5"><img src="images/7.jpg" style="300px;height:200px"><p>2D装换</p></div>
         <div class="pic pic6"><img src="images/1.jpg" style="300px;height:200px"><p>2D装换</p></div>
     </div>
    </body>
</html>

移动translate（X轴的坐标原点在左边，Y轴的坐标原点在上边）

translate()方法，根据左轴（X轴）和顶部（Y轴）位置给定参数，从当前元素位置移动

translateX(x) 仅水平方向移动（X轴移动）
translateY(y) 仅垂直方法移动（Y轴移动）
translate(x,y) 水平方向和垂直方向同时移动

translateX

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
     div{width: 1000px;height: 250px;background: #abcdef;margin: auto;}
     div>img{transform: translateX(200px)}
        </style>    
    </head>
    <body>
     <div><img src="images/1.jpg" style="100%;height:100%"></div>
    </body>
</html>

translateY(y)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
     div{width: 1000px;height: 250px;background: #abcdef;margin: auto;}
     div>img{transform: translateY(200px)}
        </style>    
    </head>
    <body>
     <div><img src="images/1.jpg" style="100%;height:100%"></div>
    </body>
</html>

translate(x,y)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
     div{width: 1000px;height: 250px;background: #abcdef;margin: auto;}
     div>img{transform: translate(100px,200px)}
        </style>    
    </head>
    <body>
     <div><img src="images/1.jpg" style="100%;height:100%"></div>
    </body>
</html>

缩放scale（水平和垂直方向的坐标原点在中心）

scale()方法，指定对象的2D scale(2D 缩放)

scaleX(x) 元素仅水平方向缩放（X轴缩放）
scaleY(y) 元素仅垂直方向缩放（Y轴缩放）
scale(x,y) 是元素水平方向和垂直方向同时缩放

scaleX

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
     div{width: 1000px;height: 250px;background: #abcdef;margin: auto;}
     div>img{transform:scaleX(.5)}
        </style>    
    </head>
    <body>
     <div><img src="images/1.jpg" style="100%;height:100%"></div>
    </body>
</html>

scaleY(y)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
     div{width: 1000px;height: 250px;background: #abcdef;margin: auto;}
     div>img{transform:scaleY(.5)}
        </style>    
    </head>
    <body>
     <div><img src="images/1.jpg" style="100%;height:100%"></div>
    </body>
</html>

scale(x,y)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
     div{width: 1000px;height: 250px;background: #abcdef;margin: auto;}
     div>img{transform:scale(.5,.5)}
        </style>    
    </head>
    <body>
     <div><img src="images/1.jpg" style="100%;height:100%"></div>
    </body>
</html>

扭曲skew（逆时针斜切）

skew()方法，指定对象斜切扭曲

skewX(x) 仅使元素在水平方向扭曲变形（X轴扭曲变形）
skewY(y) 仅使元素在垂直方向扭曲变形（Y轴扭曲变形）
skew(x,y) 使元素水平和垂直方向同时扭曲

skewX(x)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
     div{width: 500px;height: 200px;background: #abcdef;margin: auto;}
     div>img{transform:skewX(35deg)}
        </style>    
    </head>
    <body>
     <div><img src="images/1.jpg" style="100%;height:100%"></div>
    </body>
</html>

skewY(y)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
     div{width: 500px;height: 200px;background: #abcdef;margin: auto;}
     div>img{transform:skewY(35deg)}
        </style>    
    </head>
    <body>
     <div><img src="images/1.jpg" style="100%;height:100%"></div>
    </body>
</html>

skew(x,y)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
     div{width: 500px;height: 200px;background: #abcdef;margin: auto;}
     div>img{transform:skew(15deg,10deg)}
        </style>    
    </head>
    <body>
     <div><img src="images/1.jpg" style="100%;height:100%"></div>
    </body>
</html>

查看全文

相关阅读:
js高程之作用域
 js继承的实现（原型/链、函数伪装）
tween.js的API实践
 JavaScript高程第三版笔记(1-5章)
flex布局使用方法简要汇总
 three.js中物体旋转实践之房门的打开与关闭
 遇见贵人的科学方法（通向财富自由学习笔记七）
"活在未来" VS “活在当下”（通向财富自由学习笔记六）
记CBS一次动人心魄的数据保卫战
 你的人生最重的枷锁是什么？（通向财富自由学习笔记五）

原文地址：https://www.cnblogs.com/zry2510/p/7083683.html