一，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;