不要嫌麻烦或简单而不去做 o(>﹏<)o不要啊！
前言：
-
CSS
transform属性允许你修改CSS视觉格式模型的坐标空间。使用它，元素可以被转换
translate、旋转rotate、缩放scale、倾斜skew。 -
因为这些属性而去翻阅 W3C 或是 MDN 还是挺麻烦的，不如一次性列出它们的效果，这必须更方便；
-
不要嫌麻烦或简单而不去做。
效果图：
transform属性
代码部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.container{
width: 200px;
height: 200px;
margin: 50px;
float: left;
border: 1px solid gray;
/* 支持3D 空间呈现 */
transform-style: preserve-3d;
}
.box{
width: 100%;
height: 100%;
opacity: 0.75;
}
/* 2d 平移 */
#div_1 .box{
background-color: red;
/*transform: translateX(-30px) translateY(30px);*/
transform: translate(30px, -30px);
}
/* 2d 缩放 */
#div_2 .box{
background-color: deepskyblue;
/*transform: scaleX(0.5) scaleY(0.8);*/
transform: scale(0.5, 0.8);
}
/* 2d 旋转 */
#div_3 .box{
background-color: palevioletred;
/*transform-origin: bottom center;*/
transform: rotate(45deg) scaleX(1.2) scaleY(0.5);
}
/* 2d 倾斜 */
#div_4 .box{
background-color: darkblue;
/*transform: skewX(30deg);*/
/*transform: skewY(30deg);*/
transform: skew(30deg, 30deg);
}
/* 3d 平移 */
#div_5 .box{
background-color: darkcyan;
/*transform: perspective(200px) translateZ(50px);*/
transform: perspective(600px) translate3d(50px, 50px, 100px);
}
/* 3d旋转 */
#div_6 .box{
background-color: brown;
/*transform: perspective(600px) rotateX(45deg);*/
/*transform: perspective(600px) rotateY(45deg);*/
/*transform: perspective(600px) rotateZ(45deg);*/
transform: perspective(600px) rotate3d(1, 1, 1, 45deg);
}
/* 3d 缩放 */
#div_7 .box{
background-color: orange;
transform: perspective(600px) scaleZ(5) rotateX(45deg);
}
</style>
</head>
<body>
<div id="div_1" class="container">
<div class="box"></div>
</div>
<div id="div_2" class="container">
<div class="box"></div>
</div>
<div id="div_3" class="container">
<div class="box"></div>
</div>
<div id="div_4" class="container">
<div class="box"></div>
</div>
<div id="div_5" class="container">
<div class="box"></div>
</div>
<div id="div_6" class="container">
<div class="box"></div>
</div>
<div id="div_7" class="container">
<div class="box"></div>
</div>
</body>
</html>
网友评论