-
3d查看全部
-
css 設(shè)置3D場景
查看全部 -
設(shè)置3d場景
查看全部 -
3查看全部
-
使用transform-origin調(diào)整旋轉(zhuǎn)中心：
x軸：left，center，right
y軸：top，center，bottom
z軸：length px
查看全部 -
瀏覽器作為窗口，三維物體距離窗口的距離：
webkit-perspective:800px
視點，對應(yīng)x軸，y軸:
webkit-perspective-origin:50% 50%
用webkit-transform-style：-webkit-preserve-3d告訴瀏覽器設(shè)置的是3D場景
用transform屬性調(diào)整元素：
translate：
????translateX（）translateY（）translateZ（）
rotate：
????rotateX（）rotateY（）rotateZ（）
查看全部 -
transition :<過渡屬性名稱><過渡時間><過渡模式>
過渡模式:transition-timing-function
ease 緩慢開始,緩慢結(jié)束（默認）
linear 勻速
ease-in 緩慢開始
ease-out 緩慢結(jié)束
ease-in-out 緩慢開始緩慢結(jié)束（效果稍有不同）
查看全部 -
safari、chrome用webkit-transition
firefox用moz-transition
opera用o-transition
查看全部 -
記錄一下大神代碼
記錄一下大神代碼
記錄一下大神代碼
<!DOCTYPE html>
<html>
<head>
? <meta charset="UTF-8">
? <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
? <meta name="format-detection" content="telephone=no">
? <meta http-equid=“X-UA-Compatible” content=“IE=edge, chrome=1”>
? <title>正方體</title>
? <style>
?html
?{
? ? ? background: -webkit-radial-gradient(center, ellipse, #430d6d 0%, #000000 100%);
?background: radial-gradient(ellipse at center, #430d6d 0%, #000000 100%);
?height: 100%;
?}
?
? ? #window {
? ? ? width: 20em;
?height: 20em;
?position: absolute;
?left: 50%;
?top:50%;
?margin-left: -10em;
?margin-top: -10em;
?-webkit-perspective: 1000px;
?
?}
?
? ? #box{
? ? ? -webkit-animation: 6s spin linear infinite;
?position: absolute;
?width: 100%;
?height: 100%;
?-webkit-transform-style: preserve-3d;
?transform-style: preserve-3d;
?-webkit-transform: rotateX(-20deg) rotateY(-20deg);
?}
?
? ? .face {
? ? ? background: -webkit-linear-gradient(left, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), -webkit-linear-gradient(top, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px);
?-webkit-background-size: 2.5em 2.5em;
?
?background-color: rgba(0, 0, 0, 0.5);
?position: absolute;
?width: 100%;
?height: 100%;
?color: #77ffb9;
?box-shadow: inset 0 0 5em rgba(125, 125, 125, 0.8);
?}
?
? ? #face-front {
? ? ? transform: translateZ(10em);
?}
?
? ? #face-left {
? ? ? -webkit-transform: rotateY(-90deg) translateZ(10em);
?}
?
? ? #face-top {
? ? ? -webkit-transform: rotateX(90deg) translateZ(10em);
?}
?
? ? #face-right {
? ? ? -webkit-transform: rotateY(90deg) translateZ(10em);
?}
?
? ? #face-bottom {
? ? ? -webkit-transform: rotateX(-90deg) translateZ(10em);
?}
?
? ? #face-back {
? ? ? -webkit-transform: rotateX(180deg) translateZ(10em);
?}
?
?
? ? @-webkit-keyframes spin
?{
? ? ? from
?{
? ? ? ? -webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg);
?transform: translateZ(-10em) rotateX(0) rotateY(0deg);
?}
?
? ? ? to
?{
? ? ? ? -webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
?transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
?}
? ? }
? </style>
</head>
<body>
<div id="window">
? <div id="box">
? ? <div class="face" id="face-front">1</div>
? ? <div class="face hide" id="face-left">2</div>
? ? <div class="face hide" id="face-top">3</div>
? ? <div class="face hide" id="face-right">4</div>
? ? <div class="face hide" id="face-bottom">5</div>
? ? <div class="face hide" id="face-back">6</div>
? </div>
</div>
?
X:<input id="changex" type="range" name="" min="-100" max="100"
onchange="ratate()"
/>
<br>
Y:<input id="changey" type="range" name="" min="-100" max="100" onmousemove="ratate()"
/>
<script>
?function ratate()
? {
? ? var x = document.getElementById('changex').value;
?var y = document.getElementById('changey').value;
?document.getElementById('window').style.webkitPerspectiveOrigin =
? ? ? x+"% "+y+"%";
?}
</script>
</body>
</html>
查看全部 -
mark 實踐一下查看全部
-
過度模式:查看全部
-
transition:<過渡屬性名稱> <過渡時間> <過渡模式> 過渡模式分為五種：ease（緩慢開始，緩慢結(jié)束），linear（勻速），ease-in（緩慢開始），ease-out（緩慢結(jié)束），ease-in-out（緩慢開始，緩慢結(jié)束，和ease稍有區(qū)別）
查看全部 -
transform-origin
查看全部 -
transform
????- translate????位移
????- rotate????????旋轉(zhuǎn)
查看全部 -
perspective
查看全部
舉報