課程
/前端開發
/CSS3
/CSS3 3D 特效
就是通過css來解決，不用鼠標移過去，然后它能一直旋轉，最好敲下代碼，謝啦~
2016-06-13
源自：CSS3 3D 特效 3-4
正在回答
永久旋轉~要鼠標放上去再旋轉自己另加hover
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>旋轉正方體Demo</title>
? ? <style type="text/css">
? ? html,body,div,span,h1,h2,h3,h4,h5,h6,p a,img,ol,ul,li?
? ? {margin: 0;padding: 0;border: 0;outline: 0;}
? ? .threed{
? ? ? ? -moz-perspective:2000;
? ? ? ? -moz-perspective-origin:50% 50%;
? ? ? ? -webkit-perspective:2000;
? ? ? ? -webkit-perspective-origin:50% 50%;
? ? ? ? margin-top:100px;
? ? }
? ? .facegroup{
? ? ? ? clear: both;
? ? ? ? position:relative;
? ? ? ? width:200px;
? ? ? ? height:200px;
? ? ? ? background-color:#FFF;
? ? ? ? margin: 0 auto;
? ? ? ? text-align: center;
? ? ? ? -moz-transform-style:preserve-3d;
? ? ? ? -webkit-transform-style:preserve-3d;
? ? ? ? -moz-transition:5s;
? ? ? ? -webkit-transition:5s;
? ? ? ? -moz-transform-origin:center center;
? ? ? ? -webkit-transform-origin:center center;
? ? ? ? animation:facegroup 5s infinite linear; ? ? ? <!--*******改的*******-->
? ? ? ? }
? ? @keyframes facegroup{ ? ? ? ? ? ? ? ? ? ? ? ? ? ?<!--*******改的*******-->
? ? ? ? 0{
? ? ? ? ? ? transform:rotate3d(1, 1, 1,0deg);
? ? ? ? ? ? }
? ? ? ? 100%{
? ? ? ? ? ? transform:rotate3d(1, 1, 1,360deg);
? ? } ? ?
? ? .face{
? ? ? ? width:170px;
? ? ? ? background-color:rgba(0,0,225,.5);
? ? ? ? color:white;
? ? ? ? padding:14px;
? ? ? ? font-size:170px;
? ? ? ? position:absolute;
? ? ? ? line-height: 170px;
? ? ? ? border: 1px solid #fff;
? ? #face1{
? ? ? ? -moz-transform-origin:bottom;
? ? ? ? -webkit-transform-origin:bottom;
? ? #face2{
? ? ? ? -moz-transform-origin:right;
? ? ? ? -moz-transform:rotateY(90deg);
? ? ? ? -webkit-transform-origin:right;
? ? ? ? -webkit-transform:rotateY(90deg);
? ? #face3{
? ? ? ? -moz-transform:translateZ(200px);
? ? ? ? -webkit-transform:translateZ(200px);
? ? #face4{
? ? ? ? -moz-transform-origin:left;
? ? ? ? -moz-transform:rotateY(-90deg);
? ? ? ? -webkit-transform-origin:left;
? ? ? ? -webkit-transform:rotateY(-90deg);
? ? #face5{
? ? ? ? -moz-transform-origin:top;
? ? ? ? -moz-transform:rotateX(90deg);
? ? ? ? -webkit-transform-origin:top;
? ? ? ? -webkit-transform:rotateX(90deg);
? ? #face6{
? ? ? ? -moz-transform-origin: bottom;
? ? ? ? -moz-transform: rotateX(-90deg);
? ? ? ? -webkit-transform-origin: bottom;
? ? ? ? -webkit-transform: rotateX(-90deg);
? ? </style>
</head>
<body>
? ? <div class="threed">?
? ? ? ? <div class="facegroup">
? ? ? ? ? ? <div class="face" id="face1">1</div>
? ? ? ? ? ? <div class="face" id="face2">2</div>
? ? ? ? ? ? <div class="face" id="face3">3</div>
? ? ? ? ? ? <div class="face" id="face4">4</div>
? ? ? ? ? ? <div class="face" id="face5">5</div>
? ? ? ? ? ? <div class="face" id="face6">6</div>
? ? ? ? </div>
? ? </div>
</body>
</html>
同不解~
冷月詩魂 提問者
舉報
使用CSS3當中的屬性，創建真實可用的三維效果
2 回答nextPage的旋轉角度求解
3 回答如何制作一個旋轉的正方體
4 回答關于旋轉中心定位一直沒懂
3 回答怎么可以讓正方體沿著中心旋轉？
1 回答旋轉的問題
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-06-17
永久旋轉~要鼠標放上去再旋轉自己另加hover
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>旋轉正方體Demo</title>
? ? <style type="text/css">
? ? html,body,div,span,h1,h2,h3,h4,h5,h6,p a,img,ol,ul,li?
? ? {margin: 0;padding: 0;border: 0;outline: 0;}
? ? .threed{
? ? ? ? -moz-perspective:2000;
? ? ? ? -moz-perspective-origin:50% 50%;
? ? ? ? -webkit-perspective:2000;
? ? ? ? -webkit-perspective-origin:50% 50%;
? ? ? ? margin-top:100px;
? ? }
? ? .facegroup{
? ? ? ? clear: both;
? ? ? ? position:relative;
? ? ? ? width:200px;
? ? ? ? height:200px;
? ? ? ? background-color:#FFF;
? ? ? ? margin: 0 auto;
? ? ? ? text-align: center;
? ? ? ? -moz-transform-style:preserve-3d;
? ? ? ? -webkit-transform-style:preserve-3d;
? ? ? ? -moz-transition:5s;
? ? ? ? -webkit-transition:5s;
? ? ? ? -moz-transform-origin:center center;
? ? ? ? -webkit-transform-origin:center center;
? ? ? ? animation:facegroup 5s infinite linear; ? ? ? <!--*******改的*******-->
? ? ? ? }
? ? @keyframes facegroup{ ? ? ? ? ? ? ? ? ? ? ? ? ? ?<!--*******改的*******-->
? ? ? ? 0{
? ? ? ? ? ? transform:rotate3d(1, 1, 1,0deg);
? ? ? ? ? ? }
? ? ? ? 100%{
? ? ? ? ? ? transform:rotate3d(1, 1, 1,360deg);
? ? ? ? }
? ? } ? ?
? ? .face{
? ? ? ? width:170px;
? ? ? ? background-color:rgba(0,0,225,.5);
? ? ? ? color:white;
? ? ? ? padding:14px;
? ? ? ? font-size:170px;
? ? ? ? position:absolute;
? ? ? ? line-height: 170px;
? ? ? ? border: 1px solid #fff;
? ? ? ? ? ? }
? ? #face1{
? ? ? ? -moz-transform-origin:bottom;
? ? ? ? -webkit-transform-origin:bottom;
? ? ? ? }
? ? #face2{
? ? ? ? -moz-transform-origin:right;
? ? ? ? -moz-transform:rotateY(90deg);
? ? ? ? -webkit-transform-origin:right;
? ? ? ? -webkit-transform:rotateY(90deg);
? ? }
? ? #face3{
? ? ? ? -moz-transform-origin:bottom;
? ? ? ? -moz-transform:translateZ(200px);
? ? ? ? -webkit-transform-origin:bottom;
? ? ? ? -webkit-transform:translateZ(200px);
? ? }
? ? #face4{
? ? ? ? -moz-transform-origin:left;
? ? ? ? -moz-transform:rotateY(-90deg);
? ? ? ? -webkit-transform-origin:left;
? ? ? ? -webkit-transform:rotateY(-90deg);
? ? }
? ? #face5{
? ? ? ? -moz-transform-origin:top;
? ? ? ? -moz-transform:rotateX(90deg);
? ? ? ? -webkit-transform-origin:top;
? ? ? ? -webkit-transform:rotateX(90deg);
? ? }
? ? #face6{
? ? ? ? -moz-transform-origin: bottom;
? ? ? ? -moz-transform: rotateX(-90deg);
? ? ? ? -webkit-transform-origin: bottom;
? ? ? ? -webkit-transform: rotateX(-90deg);
? ? }
? ? </style>
</head>
<body>
? ? <div class="threed">?
? ? ? ? <div class="facegroup">
? ? ? ? ? ? <div class="face" id="face1">1</div>
? ? ? ? ? ? <div class="face" id="face2">2</div>
? ? ? ? ? ? <div class="face" id="face3">3</div>
? ? ? ? ? ? <div class="face" id="face4">4</div>
? ? ? ? ? ? <div class="face" id="face5">5</div>
? ? ? ? ? ? <div class="face" id="face6">6</div>
? ? ? ? </div>
? ? </div>
</body>
</html>
2016-06-16
同不解~