1. 云栖社区>
  2. >
  3. 正文

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

作者:用户 来源:互联网 时间:2018-09-10 15:01:08

css3

css3基础笔记03-2d和3d过渡 - 摘要: 本文讲的是css3基础笔记03-2d和3d过渡, 一,2d过渡: transform-origin:方向参照点;+transform:rotate(deg);角度 安卓机器人demo: <style> body{ background-color:

一,2d过渡:
transform-origin:方向参照点;+transform:rotate(deg);角度
<a href=css3基础笔记03-2d和3d过渡">
安卓机器人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;

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索css3 ,以便于您获取更多的相关知识。

弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

现在注册,免费体验40+云产品,及域名优惠!

云服务器9.9元/月,大学必备
Kubernetes上基于Istio体验云原生应用实践 资料下载