Css3 Transform 各种变形旋转 – CSS – 前端，css3背景图片平铺

<h1>Css3Transform</h1>
<!--Rotate-->
<divclass="card">
<divclass="boxrotate">
<divclass="fill"></div>
</div>
<p>rotate(45deg)</p>
</div>
<divclass="card">
<divclass="boxrotateX">
<divclass="fill"></div>
</div>
<p>rotateX(45deg)</p>
</div>
<divclass="card">
<divclass="boxrotateY">
<divclass="fill"></div>
</div>
<p>rotateY(45deg)</p>
</div>
<divclass="card">
<divclass="boxrotateZ">
<divclass="fill"></div>
</div>
<p>rotateZ(45deg)</p>
</div>
<!--scale-->
<divclass="card">
<divclass="boxscale">
<divclass="fill"></div>
</div>
<p>scale(2)</p>
</div>
<divclass="card">
<divclass="boxscaleX">
<divclass="fill"></div>
</div>
<p>scaleX(2)</p>
</div>
<divclass="card">
<divclass="boxscaleY">
<divclass="fill"></div>
</div>
<p>scaleY(2)</p>
</div>
<!--skew-->
<divclass="card">
<divclass="boxskew">
<divclass="fill"></div>
</div>
<p>skew(45deg,45deg)</p>
</div>
<divclass="card">
<divclass="boxskewX">
<divclass="fill"></div>
</div>
<p>skewX(45deg)</p>
</div>
<divclass="card">
<divclass="boxskewY">
<divclass="fill"></div>
</div>
<p>skewY(45deg)</p>
</div>
<!--translate-->
<divclass="card">
<divclass="boxtranslate">
<divclass="fill"></div>
</div>
<p>translate(45px)</p>
</div>
<divclass="card">
<divclass="boxtranslateX">
<divclass="fill"></div>
</div>
<p>translateX(45px)</p>
</div>
<divclass="card">
<divclass="boxtranslateY">
<divclass="fill"></div>
</div>
<p>translateY(45px)</p>
</div>
<divclass="card">
<divclass="boxmatrix">
<divclass="fill"></div>
</div>
<p>matrix(2,2,0,2,45,0)</p>
</div>
<h4>Perspective:100</h4>
<divclass="perspective-100">
<divclass="card">
<divclass="boxrotateX">
<divclass="fill"></div>
</div>
<p>rotateX(90deg)</p>
</div>
<divclass="card">
<divclass="boxrotateY">
<divclass="fill"></div>
</div>
<p>rotateY(45deg)</p>
</div>
</div>
<h4>Perspective:200</h4>
<divclass="perspective-200">
<divclass="card">
<divclass="boxrotateX">
<divclass="fill"></div>
</div>
<p>rotateX(90deg)</p>
</div>
<divclass="card">
<divclass="boxrotateY">
<divclass="fill"></div>
</div>
<p>rotateY(45deg)</p>
</div>
</div>
<!--transformorigin-->
<h2>Transformorigin</h2>
<divclass="card">
<divclass="boxrotate">
<divclass="fillto-100-0-0"></div>
</div>
<p>transform-origin:100%00<br/>rotate(45deg)</p>
</div>
<divclass="card">
<divclass="boxrotate">
<divclass="fillto-0-100-0"></div>
</div>
<p>transform-origin:0100%0<br/>rotate(45deg)</p>
</div>
<divclass="cardperspective-200">
<divclass="boxrotateX">
<divclass="fillto-0-100-0"></div>
</div>
<p>transform-origin:0100%0<br/>rotateX(45deg)</p>
</div>
<divclass="cardperspective-200">
<divclass="boxrotateX">
<divclass="fillto-100-0-0"></div>
</div>
<p>transform-origin:100%00<br/>rotateX(45deg)</p>
</div>
<divclass="cardperspective-200">
<divclass="boxrotateY">
<divclass="fillto-0-100-0"></div>
</div>
<p>transform-origin:0100%0<br/>rotateY(45deg)</p>
</div>
<divclass="cardperspective-200">
<divclass="boxrotateY">
<divclass="fillto-100-0-0"></div>
</div>
<p>transform-origin:100%00<br/>rotateY(45deg)</p>
</div>
<divclass="card">
<divclass="boxscale">
<divclass="fillto-100-0-0"></div>
</div>
<p>transform-origin:100%00<br/>scale(2)</p>
</div>
<divclass="card">
<divclass="boxscale">
<divclass="fillto-0-100-0"></div>
</div>
<p>transform-origin:0100%0<br/>scale(2)</p>
</div>
<divclass="card">
<divclass="boxscaleX">
<divclass="fillto-100-0-0"></div>
</div>
<p>transform-origin:100%00<br/>scaleX(2)</p>
</div>
<divclass="card">
<divclass="boxscaleX">
<divclass="fillto-0-100-0"></div>
</div>
<p>transform-origin:0100%0<br/>scaleX(2)</p>
</div>
<divclass="card">
<divclass="boxscaleY">
<divclass="fillto-100-0-0"></div>
</div>
<p>transform-origin:100%00<br/>scaleY(2)</p>
</div>
<divclass="card">
<divclass="boxscaleY">
<divclass="fillto-0-100-0"></div>
</div>
<p>transform-origin:0100%0<br/>scaleY(2)</p>
</div>

css：

*,*:after,*:before{
box-sizing:border-box;
}
body{
background:#F5F3F4;
margin:0;
padding:10px;
font-family:'OpenSans',sans-serif;
text-align:center;
}
h1{
color:#4c4c4c;
font-weight:600;
border-bottom:1pxsolid#ccc;
}
h2,h4{
font-weight:400;
color:#4d4d4d;
}
.card{
display:inline-block;
margin:10px;
background:#fff;
padding:15px;
min-width:200px;
box-shadow:03px5px#ddd;
color:#555;
}
.card.box{
width:100px;
height:100px;
margin:auto;
background:#ddd;
cursor:pointer;
box-shadow:005px#cccinset;
}
.card.box.fill{
width:100px;
height:100px;
position:relative;
background:#03A9F4;
opacity:.5;
box-shadow:005px#ccc;
-webkit-transition:0.3s;
transition:0.3s;
}
.cardp{
margin:25px00;
}
.rotate:hover.fill{
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
.rotateX:hover.fill{
-webkit-transform:rotateX(45deg);
transform:rotateX(45deg);
}
.rotateY:hover.fill{
-webkit-transform:rotateY(45deg);
transform:rotateY(45deg);
}
.rotateZ:hover.fill{
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
.scale:hover.fill{
-webkit-transform:scale(2,2);
transform:scale(2,2);
}
.scaleX:hover.fill{
-webkit-transform:scaleX(2);
transform:scaleX(2);
}
.scaleY:hover.fill{
-webkit-transform:scaleY(2);
transform:scaleY(2);
}
.skew:hover.fill{
-webkit-transform:skew(45deg,45deg);
transform:skew(45deg,45deg);
}
.skewX:hover.fill{
-webkit-transform:skewX(45deg);
transform:skewX(45deg);
}
.skewY:hover.fill{
-webkit-transform:skewY(45deg);
transform:skewY(45deg);
}
.translate:hover.fill{
-webkit-transform:translate(45px,1em);
transform:translate(45px,1em);
}
.translateX:hover.fill{
-webkit-transform:translateX(45px);
transform:translateX(45px);
}
.translateY:hover.fill{
-webkit-transform:translateY(45px);
transform:translateY(45px);
}
.matrix:hover.fill{
-webkit-transform:matrix(2,2,0,2,45,0);
transform:matrix(2,2,0,2,45,0);
}
.perspective-100.box{
-webkit-perspective:100px;
perspective:100px;
}
.perspective-200.box{
-webkit-perspective:200px;
perspective:200px;
}
.to-100-0-0{
-webkit-transform-origin:100%00;
transform-origin:100%00;
}
.to-0-100-0{
-webkit-transform-origin:0100%0;
transform-origin:0100%0;
}

效果：

css 圆，css格式工具，div css设置边框，css文字破碎重组效果，css 如何设置圆形图片，css 鼠标滑动显示隐藏属性，css3背景图片平铺