4. 景深
① 景深:让3D场景有近大远小的效果(我们肉眼距离屏幕的距离)，是一个不可继承属性，但他可以作用于后代元素(不是作用于本身的)
② 原理：
景深越大 灭点越远 元素变形更小
景深越小 灭点越近 元素变形更大
③ 景深基点：
视角的位置,perspective-origin:50% 50%;(默认值)
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
width: 400px;
height: 400px;
border: 1px solid;
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -200px;
perspective: 500px;
perspective-origin: left bottom;
}
#inner {
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
width: 200px;
height: 200px;
border: 1px solid;
background: pink;
text-align: center;
font: 50px/200px "微软雅黑";
transform: rotateX(45deg);
/* transition: 5s; */
/* transform: perspective(100px) rotateX(0deg); */
}
#wrap:hover #inner{
/* transform: perspective(100px) rotateX(360deg); */
/* transform: rotateX(360deg); */
}
</style>
</head>
<body>
<div id="wrap">
<div id="inner">
啊哈哈
</div>
</div>
</body>
</html>
5. transform-style
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
width: 400px;
height: 400px;
border: 1px solid;
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -200px;
perspective: 300px;
background: gray;
transform-style: preserve-3d;
}
#inner {
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
width: 200px;
height: 200px;
border: 1px solid;
background: pink;
text-align: center;
font: 50px/200px "微软雅黑";
transform: rotateX(45deg) translateZ(100px);
}
</style>
</head>
<body>
<div id="wrap">
<div id="inner">
啊哈哈
</div>
</div>
</body>
</html>
6. 景深叠加
① 尽量避免景深叠加
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrap {
width: 400px;
height: 400px;
border: 1px solid;
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -200px;
perspective: 300px;
background: gray;
transform-style: preserve-3d;
}
#inner {
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
width: 200px;
height: 200px;
border: 1px solid;
background: pink;
text-align: center;
font: 50px/200px "微软雅黑";
transform: rotateX(45deg) translateZ(100px);
}
</style>
</head>
<body>
<div style="perspective: 300px;">
<div id="wrap">
<div id="inner">
啊哈哈
</div>
</div>
</div>
</body>
</html>
7. 立方体（第一版）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrap {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 300px;
height: 300px;
border: 1px solid;
perspective: 200px;
transform-style: preserve-3d;
}
#wrap>.box {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
transform-style: preserve-3d;
transition: 3s;
transform-origin: center center -50px;
}
#wrap>.box>div {
position: absolute;
width: 100px;
height: 100px;
background: pink;
text-align: center;
font: 50px/100px "微软雅黑";
}
#wrap>.box>div:nth-child(5) {
transform-origin: bottom;
transform: rotateX(90deg);
top: -100px;
}
#wrap>.box>div:nth-child(6) {
transform-origin: top;
transform: rotateX(-90deg);
bottom: -100px;
}
#wrap>.box>div:nth-child(3) {
transform-origin: right;
transform: rotateY(-90deg);
left: -100px;
}
#wrap>.box>div:nth-child(4) {
transform-origin: left;
transform: rotateY(90deg);
right: -100px;
}
#wrap>.box>div:nth-child(2) {
transform: translateZ(-100px) rotateX(180deg);
}
#wrap>.box>div:nth-child(1) {
z-index: 1;
}
#wrap:hover .box{
transform: rotateX(360deg);
}
</style>
</head>
<body>
<div id="wrap">
<div class="box">
<div>前</div>
<div>后</div>
<div>左</div>
<div>右</div>
<div>上</div>
<div>下</div>
</div>
</div>
</body>
</html>
8. 立方体（backface-visibility）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrap {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 300px;
height: 300px;
border: 1px solid;
background: url(img/avatar.jpg) no-repeat;
background-size: 100% 100%;
perspective: 200px;
/* transform-style: preserve-3d; */
}
#wrap>.box {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
transform-style: preserve-3d;
transition: 3s;
transform-origin: center center -50px;
}
#wrap>.box>div {
position: absolute;
width: 100px;
height: 100px;
background: rgba(123,321,333,.3);
text-align: center;
font: 50px/100px "微软雅黑";
backface-visibility: hidden;
}
#wrap>.box>div:nth-child(5) {
transform-origin: bottom;
transform: rotateX(90deg);
top: -100px;
}
#wrap>.box>div:nth-child(6) {
transform-origin: top;
transform: rotateX(-90deg);
bottom: -100px;
}
#wrap>.box>div:nth-child(3) {
transform-origin: right;
transform: rotateY(-90deg);
left: -100px;
}
#wrap>.box>div:nth-child(4) {
transform-origin: left;
transform: rotateY(90deg);
right: -100px;
}
#wrap>.box>div:nth-child(2) {
transform: translateZ(-100px) rotateX(180deg);
}
#wrap>.box>div:nth-child(1) {
z-index: 1;
}
#wrap:hover .box{
transform: rotateX(360deg);
/* transform: rotate3d(1,2,3,720deg); */
}
</style>
</head>
<body>
<div id="wrap">
<div class="box">
<div>前</div>
<div>后</div>
<div>左</div>
<div>右</div>
<div>上</div>
<div>下</div>
</div>
</div>
</body>
</html>
9. 立方体（第二版）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrap {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 300px;
height: 300px;
border: 1px solid;
perspective: 200px;
}
#wrap>.box {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
transform-style: preserve-3d;
transition: 3s;
transform-origin: center center -50px;
}
#wrap>.box>div {
position: absolute;
width: 100px;
height: 100px;
background: pink;
text-align: center;
font: 50px/100px "微软雅黑";
backface-visibility: hidden;
transform-origin: center center -50px;
}
#wrap>.box>div:nth-child(5) {
transform: rotateX(90deg);
}
#wrap>.box>div:nth-child(6) {
transform: rotateX(270deg);
}
#wrap>.box>div:nth-child(3) {
transform: rotateY(270deg);
}
#wrap>.box>div:nth-child(4) {
transform: rotateY(90deg);
}
#wrap>.box>div:nth-child(2) {
transform: rotateY(180deg) rotateZ(180deg);
}
#wrap>.box>div:nth-child(1) {
}
#wrap:hover > .box{
transform: rotateX(180deg);
}
</style>
</head>
<body>
<div id="wrap">
<div class="box">
<div>前</div>
<div>后</div>
<div>左</div>
<div>右</div>
<div>上</div>
<div>下</div>
</div>
</div>
</body>
</html>
10. 三棱柱
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrap {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 300px;
height: 300px;
border: 1px solid;
perspective: 200px;
}
#wrap>.box {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
transform-style: preserve-3d;
transition: 3s;
transform-origin: center center -28.867513459481287px;
}
#wrap>.box>div {
position: absolute;
width: 100px;
height: 100px;
background: pink;
text-align: center;
font: 50px/100px "微软雅黑";
backface-visibility: hidden;
transform-origin: center center -28.867513459481287px;
}
#wrap>.box>div:nth-child(3) {
transform: rotateY(240deg);
}
#wrap>.box>div:nth-child(2) {
transform: rotateY(120deg);
}
#wrap>.box>div:nth-child(1) {
}
#wrap:hover > .box{
transform: rotateY(360deg);
}
</style>
</head>
<body>
<div id="wrap">
<div class="box">
<div>3</div>
<div>1</div>
<div>2</div>
</div>
</div>
</body>
</html>
11. 多棱柱
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
#wrap {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 300px;
height: 300px;
/* border: 1px solid; */
perspective: 100px;
}
#wrap>.box {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 300px;
height: 100px;
transform-style: preserve-3d;
transition: 10s transform;
/* transform-origin: center center -28.867513459481287px; */
}
#wrap>.box>div {
position: absolute;
width: 300px;
height: 100px;
background: pink;
text-align: center;
font: 50px/100px "微软雅黑";
backface-visibility: hidden;
}
#wrap:hover > .box{
transform: rotateY(360deg);
}
</style>
</head>
<body>
<div id="wrap">
<div class="box">
</div>
</div>
</body>
<script type="text/javascript">
// n:棱数
window.onload=function(){
createlZ(11);
}
function createlZ(n){
var boxNode = document.querySelector("#wrap > .box");
var styleNode = document.createElement("style");
// 外角
var degOut = 360/n;
// 内角
var degIN = 180-360/n;
// 棱长
var length=boxNode.offsetWidth;
var text="";
var cssText ="";
for(var i=0;i<n;i++){
text+="<div>"+(i+1)+"</div>";
cssText+="#wrap > .box > div:nth-child("+(i+1)+"){transform:rotateY("+(i*degOut)+"deg);}";
}
cssText+="#wrap > .box{transform-origin:center center -"+(length/2*Math.tan((degIN/2)*Math.PI/180))+"px;}";
cssText+="#wrap > .box > div{transform-origin:center center -"+(length/2*Math.tan((degIN/2)*Math.PI/180))+"px;}";
boxNode.innerHTML=text;
styleNode.innerHTML=cssText;
document.head.appendChild(styleNode);
}
</script>
</html>
九、动画
1. animation-name
2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction
示例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
position: relative;
margin: 200px auto;
width: 300px;
height: 300px;
border: 1px solid;
}
#test{
position: absolute;
left: 50%;
top: 50%;
/* transform: translate3d(-50%,-50%,0); */
margin-left: -50px;
margin-top: -50px;
width: 100px;
height: 100px;
background: pink;
text-align: center;
font: 20px/100px "微软雅黑";
border-radius: 50%;
/* 动画内的属性 */
animation-name: move;
animation-duration: 3s;
animation-timing-function: linear;
/* 反转的是关键帧和animation-timing-function */
animation-direction: alternate;
/* animation-direction: alternate-reverse; */
/* 动画外的属性 */
animation-delay: 1s;
/* 只作用于动画内的属性 */
/* 重复的是关键帧 */
animation-iteration-count: 3;
/*
元素在动画外的状态
backwards: from 之前的状态与from的状态保持一致
forwards: to之后的状态与to的状态保持一致
both: backwards+forwards
*/
animation-fill-mode: both;
animation-play-state: running;
}
@keyframes move{
from{
transform: translateY(-100px);
}
to{
transform: translateY(100px);
}
}
#wrap:hover #test{
animation-play-state: paused;
}
</style>
</head>
<body>
<div id="wrap">
<div id="test">
啊哈哈
</div>
</div>
</body>
</html>
示例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
position: relative;
margin: 200px auto;
width: 300px;
height: 300px;
border: 1px solid;
}
#test{
position: absolute;
left: 50%;
top: 50%;
/* transform: translate3d(-50%,-50%,0); */
margin-left: -50px;
margin-top: -50px;
width: 100px;
height: 100px;
background: pink;
text-align: center;
font: 20px/100px "微软雅黑";
border-radius: 50%;
/* 动画内的属性 */
animation-name: move;
animation-duration: 3s;
animation-timing-function: ease-in;
/* 反转的是关键帧和animation-timing-function */
animation-direction: reverse;
/* 动画外的属性 */
animation-delay: 2s;
/* 只作用于动画内的属性 */
/* 重复的是关键帧 */
animation-iteration-count: 1;
}
@keyframes move{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="wrap">
<div id="test">
啊哈哈
</div>
</div>
</body>
</html>
7. animation-fill-mode
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
position: relative;
margin: 200px auto;
width: 300px;
height: 300px;
border: 1px solid;
}
#test{
position: absolute;
left: 50%;
top: 50%;
/* transform: translate3d(-50%,-50%,0); */
margin-left: -50px;
margin-top: -50px;
width: 100px;
height: 100px;
background: pink;
text-align: center;
font: 20px/100px "微软雅黑";
/* 动画内的属性 */
animation-name: move;
animation-duration: 3s;
animation-timing-function: linear;
/* 反转的是关键帧和animation-timing-function */
animation-direction: normal;
/* 动画外的属性 */
animation-delay: 2s;
/* 只作用于动画内的属性 */
/* 重复的是关键帧 */
animation-iteration-count: 3;
/*
元素在动画外的状态
backwards: from 之前的状态与from的状态保持一致
forwards: to之后的状态与to的状态保持一致
both: backwards+forwards
*/
animation-fill-mode: forwards;
}
@keyframes move{
from{
transform: translateY(-100px);
}
to{
transform: translateY(100px);
}
}
</style>
</head>
<body>
<div id="wrap">
<div id="test">
啊哈哈
</div>
</div>
</body>
</html>
8. animation-play-state
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
position: relative;
margin: 200px auto;
width: 300px;
height: 300px;
border: 1px solid;
}
#test{
position: absolute;
left: 50%;
top: 50%;
/* transform: translate3d(-50%,-50%,0); */
margin-left: -50px;
margin-top: -50px;
width: 100px;
height: 100px;
background: pink;
text-align: center;
font: 20px/100px "微软雅黑";
/* 动画内的属性 */
animation-name: move;
animation-duration: 3s;
animation-timing-function: linear;
/* 反转的是关键帧和animation-timing-function */
animation-direction: normal;
/* 动画外的属性 */
animation-delay: 1s;
/* 只作用于动画内的属性 */
/* 重复的是关键帧 */
animation-iteration-count: 3;
/*
元素在动画外的状态
backwards: from 之前的状态与from的状态保持一致
forwards: to之后的状态与to的状态保持一致
both: backwards+forwards
*/
animation-fill-mode: both;
animation-play-state: running;
}
@keyframes move{
from{
transform: translateY(-100px);
}
to{
transform: translateY(100px);
}
}
#wrap:hover #test{
animation-play-state: paused;
}
</style>
</head>
<body>
<div id="wrap">
<div id="test">
啊哈哈
</div>
</div>
</body>
</html>
9. 关键帧
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrap {
position: relative;
margin: 200px auto;
width: 300px;
height: 300px;
border: 1px solid;
}
#test {
position: absolute;
left: 50%;
top: 50%;
/* transform: translate3d(-50%,-50%,0); */
margin-left: -50px;
margin-top: -50px;
width: 100px;
height: 100px;
background: pink;
text-align: center;
font: 20px/100px "微软雅黑";
border-radius: 50%;
/* 动画内的属性 */
animation-name: move;
animation-duration: 3s;
animation-timing-function: steps(2);
/* 反转的是关键帧和animation-timing-function */
animation-direction: normal;
/* animation-direction: alternate-reverse; */
/* 动画外的属性 */
animation-delay: 1s;
/* 只作用于动画内的属性 */
/* 重复的是关键帧 */
animation-iteration-count: 3;
/*
元素在动画外的状态
backwards: from 之前的状态与from的状态保持一致
forwards: to之后的状态与to的状态保持一致
both: backwards+forwards
*/
animation-fill-mode: both;
animation-play-state: running;
}
@keyframes move {
0% {
transform: translateY(-100px);
}
25% {
transform: translateY(-50px);
}
50% {
transform: translateY(0px);
}
70% {
transform: translateY(50px);
}
100% {
transform: translateY(100px);
}
/* 百分比指的是时间 */
}
</style>
</head>
<body>
<div id="wrap">
<div id="test">
啊哈哈
</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
