css3 (二) 手册 02

最新推荐文章于 2024-11-15 11:47:58 发布

weixin_33755557

最新推荐文章于 2024-11-15 11:47:58 发布

阅读量103

点赞数

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000015812431

本文详细介绍了CSS3中2D和3D变形处理的方法，包括旋转、缩放、平移和倾斜等操作的具体实现方式，并通过实例展示了如何使用transform属性来改变元素的外观。

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);