什么是transform 属性
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。具体属性可以看下表，详情请点击CSS transform 属性查看。
题目要求
html代码
<htmllang="en"><head><metacharset="UTF-8"><title>第二题--</title><linkrel="stylesheet"href="css/style.css"></head><body><divclass="one"><divclass="bba"><divclass="tu"><imgsrc="img/img.jpg"></div><divclass="di"><h3>冬天</h3><span>冬天到了,万物开始收藏,朔风变得凛冽,水开始凝冰,几季的繁荣与欢腾在入冬后渐渐消逝,大自然又迎来了一轮的枯荣。</span><ahref="">查看</a></div></div></div></body></html>
css代码
*{ margin:0; padding:0; } ol,ul,li { list-style:none; } a { /* ___(1)_____;清除下划线 */text-decoration: none;/*清除下划线*/} .one { width:400px; display:inline-block; margin:20px20px40px; } .one.bba { position:relative; /* ___(2)_____:preserve-3d;让转换的子元素保留3D转换 */transform-style:preserve-3d;/*让转换的子元素保留3D转换*//* ___(3)_____:1000px;设置元素被查看位置的视图 */perspective:1000px;/*设置元素被查看位置的视图*/} .one.bba.tu { overflow:hidden; } .one.bba.di { height:260px; width:40%; opacity:0; position:absolute; top:0; left:0; padding:20px; background:#2c3f52; color:#ed4e6e; /* ___(4)_____:left center;设置旋转元素的基点位置 */transform-origin:leftcenter;/*设置旋转元素的基点位置*//* transform:___(5)_____;设置沿着Y轴旋转-90度 */transform:rotateY(-90deg);/*设置沿着Y轴旋转-90度*//* transition:___(6)_____;设置过渡属性transform执行0.4s,透明的执行0.1s */transition:transform0.4s,opacity0.1s;/*设置过渡属性transform执行0.4s,透明的执行0.1s*/} .one.bbaimg { width:400px; height:300px; display:block; position:relative; } .one.bba.dih3 { color:#fff; line-height: 40px; } .one.bba.dia { position:absolute; bottom:20px; right:20px; text-align:center; padding:5px10px; border-radius:6px; display:inline-block; background:#ed4e6e; color:#fff; } .one.bba:hoverimg { /* transform:___(7)_____;设置该img向右位移宽度的四分之一 */transform:translateX(25%);/*设置该img向右位移宽度的四分之一*/} .one.bba:hover.di { /* ___(8)_____:left center;设置 3D 元素的基点位置 */perspective-origin:leftcenter;/*设置 3D 元素的基点位置*//* ___(9)_____:1;设置透明度为1 */opacity:1;/*设置透明度为1*//* transform:___(10)_____;设置沿着Y轴旋转0度 */transform:rotateY(0deg);/*设置沿着Y轴旋转0度*/}
题目解析
这题的考点主要是transform属性，其中设置元素被查看位置的视图、(3D/2D)基点位置这两个问题值得一提。
基点问题：
通过transform-origin属性改变被转换元素的位置。2D 转换元素能够改变元素 X 和 Y 轴3D 转换元素还能改变其 Z 轴。(该属性必须与transform属性一同使用)
perspective-origin属性定义 3D 元素所基于的 X 轴和 Y 轴。通过该属性改变 3D 元素的底部位置。该属性必须与perspective属性一同使用，而且只影响 3D 转换元素。(该属性必须与 perspective 属性一同使用，而且只影响 3D 转换元素)
元素被查看位置的视图问题：
设置元素被查看位置的视图就是指设置perspective属性，perspective 属性定义 3D 元素距视图的距离，以像素计。(该属性只影响 3D 转换元素)
