css3基础笔记03-2d和3d过渡

来源：互联网发布：淘宝上比较好吃的零食编辑：程序博客网时间：2024/06/05 00:58

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

阅读全文

0 0