css3 (二) 手册 02

css3 2D变形处理

旋转

transform: rotate(20deg);
-webkit-transform: rotate(20deg);
 -moz-transform: rotate(20deg);

缩放

transform: scale(0.7);
-webkit-transform: scale(0.7);
 -moz-transform: scale(0.7);

transform: scale(0.7, 0.5);
// 水平 0.7 垂直 0.5

平移

transform: translate(20px, 50px);
// 水平向右 20px
// 垂直向下 50px

倾斜

transform: skew(20deg, 30deg);
// 水平倾斜 20deg， 垂直倾斜 30deg

混合

// 先旋转、再缩放、再移动
transform: rotate(45deg) , scale(0.5), translate(20px , 40px);

案例：

<!DOCTYPE html>
<html>
<head>
<style> 
body
{
    margin:30px;
    background-color:#E9E9E9;
}

div.polaroid
{
    width:294px;
    padding:10px 10px 20px 10px;
    border:1px solid #BFBFBF;
    background-color:white;
    /* Add box-shadow */
    box-shadow:2px 2px 3px #aaaaaa;
}

div.rotate_left
{
    float:left;
    -ms-transform:rotate(7deg); /* IE 9 */
    -moz-transform:rotate(7deg); /* Firefox */
    -webkit-transform:rotate(7deg); /* Safari and Chrome */
    -o-transform:rotate(7deg); /* Opera */
    transform:rotate(7deg);
}

div.rotate_right
{
    float:left;
    -ms-transform:rotate(-8deg); /* IE 9 */
    -moz-transform:rotate(-8deg); /* Firefox */
    -webkit-transform:rotate(-8deg); /* Safari and Chrome */
    -o-transform:rotate(-8deg); /* Opera */
    transform:rotate(-8deg);
}
</style>
</head>
<body>

<div class="polaroid rotate_left">
    <img src="/i/ballade_dream.jpg" alt="郁金香" width="284" height="213" />
    <p class="caption">上海鲜花港的郁金香，花名：Ballade Dream。</p>
</div>

<div class="polaroid rotate_right">
    <img src="/i/china_pavilion.jpg" alt="世博中国馆" width="284" height="213" />
    <p class="caption">2010年上海世博会，中国馆。</p>
</div>
</body>
</html>

transform-origin 定义变形的基准点

transform-origin: x-axis y-axis z-axis;
x-axis    
定义视图被置于 X 轴的何处。可能的值：
left
center
right
length
%

y-axis    
定义视图被置于 Y 轴的何处。可能的值：
top
center
bottom
length
%

z-axis    
定义视图被置于 Z 轴的何处。可能的值：
length

.wrapper {
  width: 400px;
  height: 100px;
  border: 2px dotted red;
  margin: 20px auto; 
  text-align: center;
  line-height: 100px;
}
.wrapper div {
  background: orange;
  color: #fff;
  -webkit-transform: skew(15deg);
  -moz-transform: skew(15deg);
  transform: skew(15deg);
  -webkit-transform-origin: top right;
  -moz-transform-origin: top right;
  transform-origin: top right;
}

css3 3D变形处理

css3 3D坐标系

rotateX, rotateY, rotateZ

transform: rotateX(10deg);

css3 (二) 手册 02

css3 2D变形处理

旋转

缩放

平移

倾斜

混合

transform-origin 定义变形的基准点

css3 3D变形处理

rotateX, rotateY, rotateZ

Meils

引用和评论

微信小程序知识点总结（一）

CSS 如何模拟“真实的”进度条？

使用flex布局解决经典布局中overflow必须设置高度才能滚动问题

CSS垂直水平居中

SAP CRM Fiori 应用和 SAP Commerce Cloud (电商云) UI 如何通过调整CSS来改变UI显示风格

关于将本地 SAP UI5 应用配置到本地 Fiori Launchpad 的技术实现深入讲解试读版

授人以渔 - 如何自行查询任意 SAP UI5 控件属性的文档和技术实现细节试读版