課程
/前端開發
/CSS3
/CSS3 3D 特效
怎么可以讓正方體沿著中心旋轉？
2017-09-07
源自：CSS3 3D 特效 3-4
正在回答
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<title>正方體</title>
</head>
<body>
????<div?class='out-box'>
????????<div?class="inner-box">
????????????<span?class="front?common">前</span>
????????????<span?class="left?common">左</span>
????????????<span?class="right?common">右</span>
????????????<span?class="behind?common">后</span>
????????????<span?class="top?common">上</span>
????????????<span?class="bottom?common">下</span>
????????</div>
????</div>
????<style>
????????body,html{
????????????width:?100%;
????????????height:?100%;
????????????padding:?0;
????????????margin:?0;
????????????background-color:?antiquewhite;
????????}
????????.out-box?{
????????????display:?flex;
????????????justify-content:?center;
????????????align-items:?center;
????????????perspective:?5000px;
????????????backface-visibility:?hidden;
????????.inner-box?{
????????????width:?300px;
????????????height:?300px;
????????????position:?relative;
????????????transform-style:?preserve-3d;
????????????transform:?translatez(-150px)?rotateX(30deg)?rotateY(30deg)?;
????????.front?{
????????????background-color:?salmon;
????????????transform:translatez(150px);
????????.behind?{
????????????transform:translatez(-150px);
????????????background-color:?aqua;
????????.right?{
????????????background-color:?chartreuse;
????????????transform:rotateY(90deg)?translatez(150px)?;
????????.left?{
????????????background-color:?pink;
????????????transform:rotateY(-90deg)?translatez(150px)?;
????????.top?{
????????????background-color:?darkcyan;
????????????transform:?rotateX(90deg)?translateZ(150px);
????????.bottom?{
????????????background-color:?coral;
????????????transform:?rotateX(90deg)?translateZ(-150px);
????????.inner-box:hover??{
???????????
????????????transform:?translatez(-150px)?rotateX(135deg)?rotateY(45deg)?;
????????????transition:?all?3s;
????????.common?{
????????????position:?absolute;
????????????left:?0;
????????????right:?0;
????????????top:?0;
????????????bottom:?0;
????????????margin:?auto;
????????????display:?block;
????????????text-align:?center;
????????????font-size:?35px;
????????????font-weight:?bold;
????????????color:?#fff;
????????????line-height:?300px;
????</style>
</body>
</html>
加一個關鍵幀動畫
@-webkit-keyframes s{ ??? 0%{ ??????? -webkit-transform:rotateY(0); ??? } ??? 100%{ ??????? -webkit-transform:rotateY(-359.9deg); ??? } }
http://www.w3school.com.cn/cssref/pr_transform-origin.asp
查看這個文檔就可以了，調整你的transform-origin 在 x y z 三個軸上的位置為 50%
學習之王 提問者
舉報
使用CSS3當中的屬性，創建真實可用的三維效果
3 回答如何制作一個旋轉的正方體
4 回答關于旋轉中心定位一直沒懂
1 回答角度是順時針旋轉為正么？
2 回答如何讓它自己一直旋轉下去？？求解~
1 回答正方體中的數字是反的
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2021-02-04
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<title>正方體</title>
</head>
<body>
????<div?class='out-box'>
????????<div?class="inner-box">
????????????<span?class="front?common">前</span>
????????????<span?class="left?common">左</span>
????????????<span?class="right?common">右</span>
????????????<span?class="behind?common">后</span>
????????????<span?class="top?common">上</span>
????????????<span?class="bottom?common">下</span>
????????</div>
????</div>
????<style>
????????body,html{
????????????width:?100%;
????????????height:?100%;
????????????padding:?0;
????????????margin:?0;
????????????background-color:?antiquewhite;
????????}
????????.out-box?{
????????????width:?100%;
????????????height:?100%;
????????????display:?flex;
????????????justify-content:?center;
????????????align-items:?center;
????????????perspective:?5000px;
????????????backface-visibility:?hidden;
????????}
????????.inner-box?{
????????????width:?300px;
????????????height:?300px;
????????????position:?relative;
????????????transform-style:?preserve-3d;
????????????transform:?translatez(-150px)?rotateX(30deg)?rotateY(30deg)?;
????????}
????????.front?{
????????????background-color:?salmon;
????????????transform:translatez(150px);
????????}
????????.behind?{
????????????transform:translatez(-150px);
????????????background-color:?aqua;
????????}
????????.right?{
????????????background-color:?chartreuse;
????????????transform:rotateY(90deg)?translatez(150px)?;
????????}
????????.left?{
????????????background-color:?pink;
????????????transform:rotateY(-90deg)?translatez(150px)?;
????????}
????????.top?{
????????????background-color:?darkcyan;
????????????transform:?rotateX(90deg)?translateZ(150px);
????????}
????????.bottom?{
????????????background-color:?coral;
????????????transform:?rotateX(90deg)?translateZ(-150px);
????????}
????????.inner-box:hover??{
???????????
????????????transform:?translatez(-150px)?rotateX(135deg)?rotateY(45deg)?;
????????????transition:?all?3s;
????????}
????????.common?{
????????????position:?absolute;
????????????left:?0;
????????????right:?0;
????????????top:?0;
????????????bottom:?0;
????????????margin:?auto;
????????????display:?block;
????????????text-align:?center;
????????????font-size:?35px;
????????????font-weight:?bold;
????????????color:?#fff;
????????????width:?300px;
????????????height:?300px;
????????????line-height:?300px;
???????????
????????}
????</style>
</body>
</html>
2018-06-07
加一個關鍵幀動畫
@-webkit-keyframes s{
??? 0%{
??????? -webkit-transform:rotateY(0);
??? }
??? 100%{
??????? -webkit-transform:rotateY(-359.9deg);
??? }
}
2017-11-20
http://www.w3school.com.cn/cssref/pr_transform-origin.asp
查看這個文檔就可以了，調整你的transform-origin 在 x y z 三個軸上的位置為 50%