CSS3：过渡、转换、动画、3D转换
前端效果
源码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS3测试</title>
<style>
body{
background: #f7f7f7;
}
h1{
font-size: 16px;
}
table{
margin: 0 auto;
border: 1px solid #3a7408;
}
table tr td{
padding:30px;
border: 1px solid #3a7408;
}
div.test{
width:100px;
height:100px;
line-height: 100px;
text-align: center;
color: #fff;
border: 1px solid #999;
cursor: pointer;
}
div.test1{
background: linear-gradient(skyblue, khaki);
transition: width 2s,height 2s;
-moz-transition: width 2s,height 2s; /* Firefox 4 */
-webkit-transition: width 2s,height 2s; /* Safari 和 Chrome */
-o-transition: width 2s,height 2s; /* Opera */
}
div.test1:hover{
width:200px;
height:200px;
}
div.test2{
background: #ff0000;
}
div.test2:hover{
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
div.test3{
background: #85fd5d;
transition: transform 2s;
}
div.test3:hover{
transform:translate(100px,100px);
}
div.test4{
background: #e8851d;
transition: transform 2s;
}
div.test4:hover{
transform:scale(0.5);
}
div.test5{
background: #000022;
transition: transform 2s;
}
div.test5:hover{
transform: skew(30deg,20deg);
}
div.test6{
background: #2f7ff7;
transition: transform 2s;
}
div.test6:hover{
transform-style:preserve-3d;
transform:rotate3d(1,1,1,180deg);
}
div.test7{
background: #13E8E9;
position: relative;
}
div.test7:hover{
animation: animated_div 5s 1;
-moz-animation: animated_div 5s 1; /* Firefox */
-webkit-animation: animated_div 5s 1; /* Safari 和 Chrome */
-o-animation: animated_div 5s 1;
}
@keyframes animated_div
{
0% {transform: rotate(0deg);left:0;}
25% {transform: rotate(90deg);left:300px;background: #e8851d}
50% {transform: rotate(180deg);left:600px;background:#85fd5d;}
75% {transform: rotate(90deg);left:300px;background: #ff0000;}
100% {transform: rotate(0deg);left:0;}
}
select{
width:200px;
height:40px;
line-height: 40px;
margin-right:120px;
}
div.transition-all{
width:200px;
height:200px;
perspective: 550px;
transform-style: preserve-3d;
transition:all 0.3s ease-in;
cursor: pointer;
}
div.transition-all-square{
width:100px;
height:100px;
perspective: 550px;
transform-style: preserve-3d;
transition:all 0.3s ease-in;
cursor: pointer;
}
div.transition-all-square:hover{
transform:rotate3d(1, 1, 1, 45deg);
}
div.transition-all:hover{
transform:rotate3d(1, 1, 1, 45deg);
}
div.face{
width: 100%;
height: 100%;
position: absolute;
text-align: center;
border: 1px solid #fff;
display: flex;
align-items: center;
justify-content: center;
backface-visibility: inherit;
font-size: 20px;
color: #fff;
}
div.front{
background: rgba(90,90,90,.7);
transform: translateZ(50px);
}
div.back{
background: rgba(0,210,0,.7);
transform: rotateY(180deg) translateZ(50px);
}
div.right{
background: rgba(210,0,0,.7);
transform: rotateY(90deg) translateZ(50px);
}
div.left{
background: rgba(0,0,210,.7);
transform: rotateY(-90deg) translateZ(50px);
}
div.top{
background: rgba(210,210,0,.7);
transform: rotateX(90deg) translateZ(50px);
}
div.bottom{
background: rgba(210,0,210,.7);
transform: rotateX(-90deg) translateZ(50px);
}
</style>
</head>
<body>
<table>
<tr>
<td>
<h1>过渡：transition =》宽高改变</h1>
<div class="test test1">test1</div>
</td>
<td>
<h1>转换：transform =》顺时针旋转180度</h1>
<div class="test test2">test2</div>
</td>
<td>
<h1>过渡+转换 =》向右下平移100px</h1>
<div class="test test3">test3</div>
</td>
</tr>
<tr>
<td>
<h1>过渡+转换 =》缩小至原来的0.5倍</h1>
<div class="test test4">test4</div>
</td>
<td>
<h1>过渡+转换 =》围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。</h1>
<div class="test test5">test5</div>
</td>
<td>
<h1>过渡+3D转换 =》rotate3d(1,1,1,180deg)</h1>
<div class="test test6">test6</div>
</td>
</tr>
<tr>
<td colspan="3">
<h1>动画：@keyframes</h1>
<div class="test test7">test7</div>
</td>
</tr>
<tr>
<td colspan="3">
<h1>正方体</h1>
<div class="transition-all-square">
<div class="face front">前</div>
<div class="face back">后</div>
<div class="face right">右</div>
<div class="face left">左</div>
<div class="face top">上</div>
<div class="face bottom">下</div>
</div>
</td>
</tr>
<tr>
<td colspan="3">
<h1>正方体</h1>
<div style="display: flex;justify-content: flex-start;flex-direction: row;">
<div>
<select id="selectRotate" onchange="selectRotate()">
<option value="1">rotate3d(0)</option>
<option value="2">rotate3d(1, 1, 1, 45deg)</option>
<option value="3">rotate3d(2, -1, -1, -0.2turn)</option>
<option value="4">rotate3d(0, 1, 0.5, 3.142rad)</option>
</select>
</div>
<div class="transition-all">
<div class="face front">前</div>
<div class="face back">后</div>
<div class="face right">右</div>
<div class="face left">左</div>
<div class="face top">上</div>
<div class="face bottom">下</div>
</div>
</div>
</td>
</tr>
</table>
<script>
function selectRotate(){
var doc=document;
var opts=doc.getElementById("selectRotate");
for(var i=0;i<4;i++){
if(opts[i].selected){
doc.getElementsByClassName("transition-all")[0].style = "transform:"+opts[i].innerHTML;
return;
}
}
}
</script>
</body>
</html>总结
