第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機(jī)立即綁定

如何制作一個旋轉(zhuǎn)的正方體

思路是什么？求高手指點。。。

正在回答

3 回答

<!DOCTYPE?html>
<html?lang="cn">
<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>


1 回復(fù) 有任何疑惑可以回復(fù)我~
#1

會飛的龍貓

厲害了
2017-02-22 回復(fù) 有任何疑惑可以回復(fù)我~
#2

會飛的龍貓

厲害了
2017-02-22 回復(fù) 有任何疑惑可以回復(fù)我~

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;
這種設(shè)置背景顏色的方式?jīng)]有見過，是什么意思呀？

0 回復(fù) 有任何疑惑可以回復(fù)我~
#1

麻辣土豆

這是設(shè)置漸變背景色。
2020-03-24 回復(fù) 有任何疑惑可以回復(fù)我~

效果非常好，求私聊（請教大神53596192）

0 回復(fù) 有任何疑惑可以回復(fù)我~

舉報

0/150
提交
取消

如何制作一個旋轉(zhuǎn)的正方體

我要回答 關(guān)注問題
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號