ife_設計師
No.2 - 初步接觸 CSS 2D 變形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
}
div {
width: 35px;
height: 42px;
border: 1px solid grey;
text-align: center;
font-size: 12px;
line-height: 40px;
background-color: whitesmoke;
margin: 20px;
display: inline-block;
}
div#container{
width: 1000px;
height: 350px;
border: 0px;
background-color: white;
}
div.box0 {
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
div.box1 {
-webkit-transform: skewX(30deg);
-moz-transform: skewX(30deg);
-ms-transform: skewX(30deg);
-o-transform: skewX(30deg);
transform: skewX(30deg);
}
div.box2 {
-webkit-transform: scaleX(0.5);
-moz-transform: scaleX(0.5);
-ms-transform: scaleX(0.5);
-o-transform: scaleX(0.5);
transform: scaleX(0.5);
}
div.box3 {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
div.box4 {
-webkit-transform: translate(10px,20px);
-moz-transform: translate(10px,20px);
-ms-transform: translate(10px,20px);
-o-transform: translate(10px,20px);
transform: translate(10px,20px);
}
div.box5 {
-webkit-transform: rotate(45deg) skewX(30deg) translate(10px,20px);
-moz-transform: rotate(45deg) skewX(30deg) translate(10px,20px);
-ms-transform: rotate(45deg) skewX(30deg) translate(10px,20px);
-o-transform: rotate(45deg) skewX(30deg) translate(10px,20px);
transform: rotate(45deg) skewX(30deg) translate(10px,20px);
}
</style>
</head>
<body>
<div id="container">
<div class="box0">box0</div>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
<div class="box5">box5</div>
</div>
</body>
</html>
