这是转载,这是转载,这是转载
只是觉得写的很好分享到腾讯云,推荐腾讯云服务器,除学生机外非常便宜的活动 腾讯云活动
如果侵权联系我删除 Email:xlj@xlj0.com
文章来源:https://www.cnblogs.com/Ersonnnn/p/14966434.html
一个炫酷的网页离不开css的transform、transition、animation三个属性,之前一直没有涉及到这块内容,刚好最近要做一个相关东西,趁此机会好好学一学这三个属性。
实现元素的平移、旋转、缩放或倾斜。
只能转换由盒模型定位的元素。
在介绍转换之前需要先介绍一下变形原点,即转换的基点。
(1) 语法
(2) 示例
(1) 语法
(2) 示例
<div class="transform-div"></div>
.transform-div {
width: 200px;
height: 200px;
background-color: orange;
transform: translate(300px, 10%);
}
(1) 语法
rotate3D(1, 0, 0, a)
, rotate3D(0, 1, 0, a)
, rotate3D(0, 0, 1, a)
的简写。
(2) 示例
<div class="container">
<div class="line1"></div>
<div class="line2"></div>
<div class="transform-div"></div>
</div>
.container {
width: 400px;
height: 400px;
border: 4px solid;
position: relative;
}
.transform-div {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
width: 200px;
height: 200px;
background-color: orange;
transition: all 1s;
transform: none;
opacity: 0.7;
}
.transform-div:hover {
transform: rotateY(-45deg);
}
.line1 {
position: absolute;
width: 100%;
height: 50%;
border-bottom: 2px solid;
}
.line2 {
position: absolute;
top: 0;
height: 100%;
width: 50%;
border-right: 2px solid;
}
(截图看到的效果不是很清晰,可以复制上述代码看一下旋转效果)
(1) 语法
(1) 语法
(2) 示例
【补充】CSS角度单位:deg(度)、grad(梯度)、rad(弧度)、turn(圆、圈) 180deg = 200grad = 0.5turn = Π
示例:
【解释】如上图所示,平移和旋转的顺序不同,得到的结果也不同。根本原因是,旋转时坐标系会跟着旋转。如下图:
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。