html 实例源码
实例源码：
源代码：
执行
执行中...
x
1
<!DOCTYPE html>2
<html>3
<head>4
<meta charset="utf-8"> 5
<title>时代Java与您共同学习(NowJava.com)</title> 6
<style>7
#div1 {8
position: relative;9
margin: auto;10
height: 150px;11
width: 250px;12
padding: 10px;13
border: 1px solid black;14
/* Chrome, Safari, Opera */15
-webkit-perspective: 125px;16
-webkit-animation: mymove 5s infinite;17
/* Standard syntax */18
perspective: 125px;19
animation: mymove 5s infinite;20
}21
22
/* Chrome, Safari, Opera */23
@-webkit-keyframes mymove {24
50% {-webkit-perspective-origin: 10px 50%;}25
}26
27
/* Standard syntax */28
@keyframes mymove {29
50% {perspective-origin: 10px 50%;}30
}31
32
#div2 {33
padding: 50px;34
position: absolute;35
border: 1px solid black;36
background-color: coral;37
-webkit-transform: rotateX(45deg); /* Chrome, Safari, Opera */38
transform: rotateX(45deg);39
}40
</style>41
</head>42
<body>43
44
<p>perspective-origin 属性支持动画效果。</p>45
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>46
47
/**代码未完, 请加载全部代码(NowJava.com).**/执行结果：
本文系作者在时代Java发表，未经许可，不得转载。如有侵权，请联系nowjava@qq.com删除。
编辑于
关注时代Java