提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

CSS transform 属性(1+X Web前端开发初级 例题)

属性WebCSS 前端开发 初级 例题 transform
2023-09-11 14:15:13 时间

什么是transform 属性

 transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。具体属性可以看下表，详情请点击CSS transform 属性查看。

 题目要求

 html代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>第二题--</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="one">
    <div class="bba">
        <div class="tu">
        	<img src="img/img.jpg">
        </div>
        <div class="di">
            <h3>冬天</h3>
            <span>冬天到了,万物开始收藏,朔风变得凛冽,水开始凝冰,几季的繁荣与欢腾在入冬后渐渐消逝,大自然又迎来了一轮的枯荣。</span>
            <a href="">查看</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:20px 20px 40px;
}
.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:left center;/*设置旋转元素的基点位置*/
	/* transform:___(5)_____;设置沿着Y轴旋转-90度 */
	transform:rotateY(-90deg);/*设置沿着Y轴旋转-90度*/
	/* transition:___(6)_____;设置过渡属性transform执行0.4s,透明的执行0.1s */
	transition:transform 0.4s,opacity 0.1s;/*设置过渡属性transform执行0.4s,透明的执行0.1s*/
}
.one .bba img {
	width:400px;
	height:300px;
	display:block;
	position:relative;
}
.one .bba .di h3 {
	color:#fff;
	line-height: 40px;
}
.one .bba .di a {
	position:absolute;
	bottom:20px;
	right:20px;
	text-align:center;
	padding:5px 10px;
	border-radius:6px;
	display:inline-block;
	background:#ed4e6e;
	color:#fff;
}
.one .bba:hover img {
	/* transform:___(7)_____;设置该img向右位移宽度的四分之一 */
	transform:translateX(25%);/*设置该img向右位移宽度的四分之一*/
}
.one .bba:hover .di {
	/* ___(8)_____:left center;设置 3D 元素的基点位置 */
	perspective-origin:left center;/*设置 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 转换元素)

效果图 

相关文章