一，2d過渡：
transform-origin：方向參照點；+transform:rotate(deg);角度
安卓機器人demo：
<style>
body{
background-color: skyblue;
}
.robot{
/* border: 1px solid gray; */
margin: 50px auto;
width: 400px;
height: 400px;
}
.robot>div{
background-color: yellowgreen;
}
/* 頭部 */
.head{
width: 230px;
height: 105px;
margin: 0 auto;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
position: relative;
}
/* 眼睛 */
.head::before,.head::after{
content: "";
border-radius: 50%;
width: 30px;
height: 30px;
background-color: orange;
position: absolute;/* 僞元素默認沒有寬高需要通過定位或者轉換成塊級元素後設置 */
top: 30px;
}
.head::before{
left:50px;
}
.head::after{
right: 50px;
}
/* 觸鬚 */
.line{
position: relative;
width: 230px;/* 把line的寬度設置跟head的寬度一致，方便設置僞元素中的left和right的值。 使其以line爲標準設置*/
margin: 0 auto;
}
.line::before,.line::after{
content: "";
border-radius: 2px;
width: 4px;
height: 50px;
background-color: yellowgreen;
position: absolute;
top: -20px;
transform-origin:bottom;/* 設置觸鬚旋轉參照點 + transform:rotate(20deg);*/
}
.line::before{
left: 50px;
transform:rotate(-20deg);
}
.line::after{
right: 50px;
transform:rotate(20deg);
}
/* 身體 */
.body{
width: 230px;
height: 170px;
border-radius: 0 0 20px 20px;
margin: 10px auto 0;
position:relative;
}
.body::before,.body::after{
content: "";
border-radius: 2px;
width: 50px;
height: 170px;
border-radius:25px;
background-color: yellowgreen;
position: absolute;
transform-origin:top;/* 設置旋轉中心點 */
}
.body::before{
left: -60px;
}
.body::after{
right: -60px;
}
/* 腿部 */
.foot{
margin: -20px auto;
width: 230px;
position: relative;
}
.foot::before,.foot::after{
content: "";
border-radius: 20px;
width: 50px;
height: 120px;
border-radius:25px;
background-color: yellowgreen;
position: absolute;
}
.foot::before{
left: 40px;
}
.foot::after{
right: 40px;
}
/* 添加過渡效果 */
/* *號無法匹配僞元素生成的標籤 */
*,::before,::after{
transition:all 1s;
}
.robot:hover .head::before{
background-color: hotpink;
}
.robot:hover .head::after{
background-color: hotpink;
}
.robot:hover .line::before{
transform:rotate(-45deg);
}
.robot:hover .line::after{
transform:rotate(-45deg);
}
.robot:hover .body::before{
transform:rotate(30deg);
}
.robot:hover .body::after{
transform:rotate(30deg);
}
.robot:hover .foot::before{
/* 第一種方式height */
/* height: 150px; */
/* 第二種方式：圖形可能會發生改變，根據需求進行選擇 */
transform:scaleY(1.3);
}
.robot:hover .foot::after{
transform:scaleY(1.3);
}
</style>
</head>
<body>
<!-- div.robot>div.line+div.head+div.body+div.foot -->
<div class="robot">
<div class="line"></div>
<div class="head"></div>
<div class="body"></div>
<div class="foot"></div>
</div>
</body>二，3d過渡
3D效果：x軸，y軸，z軸
※，爲了能夠有一個3d的一個透視效果 需要爲旋轉對象的父元素 添加 透視屬性。perspective。
3d效果旋轉時，離我越近視覺效果越大，離我越遠視覺效果越小。
透視屬性：
設置的是 3D變換的元素 距離瀏覽器的距離。
沿着z軸旋轉看不出效果。
perspective：1000px;
transform:translateZ(100px);
<script type="text/javascript">
// 獲取 一些必要的變量
var imgs = document.querySelectorAll('img');
var output = document.querySelector('output');
// 輸入的 時候觸發
document.querySelector('#range').oninput = function (){
// 獲取 當前的值
// 計算爲角度 0-360的旋轉 range 0-100
var deg = Math.floor(this.value / 100 * 360);
// 分別設置給三個img標籤
imgs[0].style.transform = 'rotateX('+deg+'deg)';
imgs[1].style.transform = 'rotateY('+deg+'deg)';
imgs[2].style.transform = 'rotateZ('+deg+'deg)';
// 修改 output的文本質
output.innerHTML = deg;
}demo02
隱藏背面的效果：
backface-visibility: hidden;