-
transition
查看全部 -
設(shè)置3D場景
????瀏覽器本身是一個二維平面，想要看成3D的話我們得要在平面的概念上加入另一個維度，也就是深度，因此要想設(shè)置3D場景我們得要設(shè)置從那個角度觀察瀏覽器。
三維物體到瀏覽器窗口之間的距離
-webkit-perspective:800;
觀察視點(diǎn) 兩個屬性值分別對應(yīng)x軸和y軸
-webkit-perspective-origin:50% 50%;//瀏覽器的正中央
使用transform屬性調(diào)整元素
-translate? ?位移操作
translateX( x px )
translateY( y px )
translateZ( z px )
-rotate? 旋轉(zhuǎn)操作
rotateX( x deg )
rotetaY( y deg )
rotateZ( z deg )
????事實(shí)我們要使用transform屬性也可以設(shè)置成2d所以使用之前要寫下面一句代碼表示使用3d
-webkit-transform-style:-webkit-preserve-3d;
查看全部 -
transition
兩行寫法：
????-webkit-transition-property:color;
????-webkit-transition-duration:1s;
一行寫法：
????-webkit-transition:color 1s;
多個屬性的過度效果
????方法1：-webkit-transition:<屬性1> <時間1>,<屬性2> <時間2>, ...;
????方法2：-webkit-transition:<屬性1> <時間1>；
????????????????-webkit-transition:<屬性2> <時間2>；
關(guān)于transition的額外屬性
一行寫法：
????transition:<過度屬性名稱> <過度時間> <過度模式>
多行寫法：
????transition-timing-funtion
過度模式的屬性值:
ease：緩慢開始，緩慢結(jié)束（默認(rèn)，也就是沒有設(shè)置過度模式的屬性值的時候）? ? ????
linear：勻速
ease-in：緩慢開始
ease-out：緩慢結(jié)束
ease-in-out：緩慢開始，緩慢結(jié)束（和ease稍有區(qū)別）
查看全部 -
CSS3的動畫功能
transition：
????從一個屬性值平滑過渡到另一個屬性值
????transition:<過度屬性名稱> <過度時間>
????注意：
????chrome 、safari：-webkit-transition????firefox:-moz-transition
????opera:-0-transition
animation：
????支持通過關(guān)鍵幀的技術(shù)在網(wǎng)頁上產(chǎn)生更加復(fù)雜的動畫效果
查看全部 -
還沒看視頻，自己寫了下。
<!DOCTYPE?html>
<html>
????<head>
????????<title>動畫</title>
????????<style>
????????????#ex{
????????????????-webkit-perspective:?800;
????????????????-webkit-perspective-origin:?50%?50%;
????????????????-webkit-transform-style:?-webkit-preserve-3d;
????????????}
????????????.block{
????????????????display:?flex;
????????????????width:?100vw;
????????????????height:?100vh;
????????????????margin:?0?auto;
????????????????position:?relative
????????????}
????????????.kuai{
????????????????width:?200px;
????????????????height:?200px;
????????????????background-color:?#000;
????????????????text-align:?center;
????????????????line-height:?200px;
????????????????color:#fff;
????????????????font-size:?80px;
????????????????position:?absolute;
????????????????top:?50%;
????????????????left:?50%;
????????????????margin-left:?-100px;
????????????????margin-top:?-200px;
????????????????transition:?-webkit-transform?1.5s;
????????????}
????????????#font2,?#font3,?#font4,?#font5,?#font6{
????????????????-webkit-transform-origin:?center?bottom;
????????????????-webkit-transform:?rotateX(90deg);
????????????}
????????</style>
????</head>
????<body>
????????<div?id="ex">
????????????<div?class="block">
????????????????<div?id="font6"?class="kuai">6</div>
????????????????<div?id="font5"?class="kuai">5</div>
????????????????<div?id="font4"?class="kuai">4</div>
????????????????<div?id="font3"?class="kuai">3</div>
????????????????<div?id="font2"?class="kuai">2</div>
????????????????<div?id="font1"?class="kuai">1</div>
????????????????<button?id="pre">pre</button>
????????????????<button?id="last">last</button>
????????????</div>
????????</div>
????????<script>
????????????let?pre?=?document.getElementById("pre");
????????????let?last?=?document.getElementById("last");
????????????let?flag?=?1
????????????pre.onclick?=?function?()?{
????????????????if?(flag?==?6)?{
????????????????????return;
????????????????}
????????????????let?nextflag?=?flag?+?1
????????????????let?current?=?document.getElementById("font"?+?flag);
????????????????let?next?=?document.getElementById("font"?+?nextflag);
????????????????current.style?=?"-webkit-transform-origin:?center?bottom;?-webkit-transform:?rotateX(-90deg);"
????????????????next.style?=?"-webkit-transform-origin:?center?bottom;?-webkit-transform:?rotateX(0deg);"
????????????????flag?=?flag?+?1
????????????}
????????????last.onclick?=?function?()?{
????????????????if?(flag?==?1)?{
????????????????????return;
????????????????}
????????????????let?nextflag?=?flag?-?1
????????????????let?current?=?document.getElementById("font"?+?flag);
????????????????let?next?=?document.getElementById("font"?+?nextflag);
????????????????current.style?=?"-webkit-transform-origin:?center?bottom;?-webkit-transform:?rotateX(90deg);"
????????????????next.style?=?"-webkit-transform-origin:?center?bottom;?-webkit-transform:?rotateX(0deg);"
????????????????flag?=?flag?-?1
????????????}
????????</script>
????</body>
</html>
查看全部 -
3D動畫原理
查看全部 -
給父元素設(shè)置
perspective: 800;（近大遠(yuǎn)小的視距，通常設(shè)置為800）
perspective-origin: 50% 50%; （設(shè)置視距的中心）
transform-style: preserve-3d;（父元素設(shè)置該值時子元素按3d風(fēng)格展示）
子元素可以進(jìn)行位移或旋轉(zhuǎn)
transform: translateX(xpx)
transform: translateY(ypx)
transform: translateZ(zpx)
transform: rotateX(xdeg)
transform: rotateY(ydeg)
transform: rotateZ(zdeg)
查看全部 -
3D場景
-webkit-perspection: 元素距離屏幕像素;
-webkit-perspection-origin: (x軸, y軸);
transform:
translateX(x px)、translateY(y px)、translateZ(z px)
rotateX(x deg)、rotateY(y deg)、rotateZ(z deg)
-webkit-transform-style:-webkit-preserve-3d;
查看全部 -
transition:?<過渡屬性名稱> <過渡時間>?<過渡模式>
transition-timing-function:?<過渡模式>
ease、linear、ease-in、ease-out、ease-in-out
查看全部 -
懸停動態(tài)旋轉(zhuǎn)
查看全部 -
css3動畫功能：
transition: <過渡屬性名稱> <過渡時間>
webkit-transition、-moz-transition、-o-transition
animation
查看全部 -
一張豎立，其他圖片平躺
查看全部 -
可調(diào)整的旋轉(zhuǎn)中心的位置
查看全部 -
transform-origin屬性調(diào)整旋轉(zhuǎn)的中心，默認(rèn)為物體的正中心
查看全部 -
設(shè)置transform-style表示以3d形式處理元素
查看全部 -
三維中，x、y、z三個坐標(biāo)軸的方向
查看全部 -
transform屬性表示物體的平移與旋轉(zhuǎn)
查看全部 -
perspective-origin屬性表示視點(diǎn)的位置
查看全部 -
perspective代表物體距離窗口的距離
查看全部 -
五種過渡模式，線性過渡或是非勻速過渡
查看全部 -
為多個屬性設(shè)置過渡效果的方法
查看全部 -
不同瀏覽器的transition需要不同的前綴
查看全部 -
transition包括兩個參數(shù)，過渡屬性名稱、過渡時間
查看全部
舉報