css 3-3 d変換と3 Dアニメーション
24845 ワード
3 D変換
3 D反転方法
3 D位置移動の3つの書き方
3 Dビュー
3 D視野角
3 Dアニメーション
例:
3 D反転方法
rotateX(); x
rotateY(); Y
rotateZ(); Z ( rotate() )
3 D位置移動の3つの書き方
transform: translate3d(30px,30px,800px)
transform:translateZ(800px) translateX(30px) translateY(30px);
transform:translateZ(800px) translate(30px,30px);
3 Dビュー
perspective:value;
3D
3 D視野角
transform-style:preserve-3d;
3d
transform-origin:left/right top/bottom
, center
3 Dアニメーション
1. ，
@keyframes name{
from{}
to{}
to{}
}
2.
animation:( )name 5s linear 2s infinite alternate;
animation-name:
animation-duration: 0
animation-timing-function: ease
linear： 。 (0.0, 0.0, 1.0, 1.0)
ease： 。 (0.25, 0.1, 0.25, 1.0)
ease-in： 。 (0.42, 0, 1.0, 1.0)
ease-out： 。 (0, 0, 0.58, 1.0)
ease-in-out： 。 (0.42, 0, 0.58, 1.0)
cubic-bezier(, , , )： ，4 [0, 1]
animation-delay : 0
animation-iteration-count: 1
infinite：
：
animation-direction:
running：
paused：
animation-play-state: running
running：
paused：
animation-fill-mode:
none： 。
forwards：
backwards：
both：
例:
<html>
<head>
<meta charset="utf-8">
<title> title>
head>
<style type="text/css">
*{margin:0;padding:0;}
li{list-style: none;}
.wrap{transform-style:preserve-3d;transition:2s all; margin: 80px auto;width:100px;}
.wrap ul{transform:rotateX(45deg) rotateY(45deg);position: relative;transform-style:preserve-3d; width: 100px;height: 100px;}
.wrap ul li{width: 100px;height: 100px;opacity:0.2;left: 0;top:0;position: absolute;}
.wrap ul .down{background:#f00;transform: translateZ(-50px);}
.wrap ul .up{background:#f00;transform: translateZ(50px);}
.wrap ul .left{background:#ff0;transform: translateX(-50px) rotateY(90deg) ;}
.wrap ul .right{background:#f0f;transform: translateX(50px) rotateY(90deg) ;}
.wrap ul .top{background:#f0f;transform: translateX(-50px) rotateX(90deg) ;}
.wrap ul .top{background:#ff9;transform: translateX(50px) rotateX(90deg) ;}
.wrap:hover{transform:rotateY(360deg);}
style>
<body>
<div class="wrap">
<ul> <li class="left">li>
<li class="right">li>
<li class="top">li>
<li class="bottom">li>
<li class="up">li>
<li class="down">li>
ul>
div>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>3d title>
<style type="text/css">
*{padding:0;margin: 0;}
li{list-style: none;}
ul{width: 1000px;margin:50px auto;}
ul li{float: left;transform-style: preserve-3d;}
ul li a{display: block;width:199px;height:50px;border-right: 1px solid #666;position: relative; text-align: center;transform-style: preserve-3d;transition:1s all;}
ul li:last-child a{border: 0;}
ul li a p{width:199px;height:50px;position: absolute;left: 0;top: 0; font:700 12px/50px "";}
ul li a .a1{background: #f99;}
ul li a .a2{
background-color: #51938f;
-webkit-background-size: 5px 5px;
background-size: 5px 5px;
background-position: 0 0, 30px 30px;
background-image:linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480),linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
transform-origin: bottom;transform: rotateX(-90deg) translateY(50px);
}
ul li a:hover{transform-origin: top;transform: rotateX(90deg);}
style>
head>
<body>
<ul>
<li>
<a href="">
<p class="a1"> p>
<p class="a2"> p>
a>
li>
<li>
<a href="">
<p class="a1"> p>
<p class="a2"> p>
a>
li>
<li>
<a href="">
<p class="a1"> p>
<p class="a2"> p>
a>
li>
<li>
<a href="">
<p class="a1"> p>
<p class="a2"> p>
a>
li>
<li>
<a href="">
<p class="a1"> p>
<p class="a2"> p>
a>
li>
ul>
body>
html>