(7)CSS动画-页面特效

最新推荐文章于 2023-09-26 17:07:23 发布

VIP文章 biandous

最新推荐文章于 2023-09-26 17:07:23 发布

阅读量512

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/biandous/article/details/53427675

版权

一、2D、3D转换

通过CSS3转换，我们能够对元素精心移动、缩放、转动、拉长或者拉伸转换是使元素改变形状、尺寸和位置的一种效果，可以使用2D3D转换元素

<body>
    <div>这是一个初始效果</div>
    <br/>
    <div class="div2">改变后的效果2</div>
    <div class="div3">改变后的效果3</div>
    <div class="div4">改变后的效果4</div>
    <div class="div5">改变后的效果5</div>
    <div class="div6">改变后的效果6</div>
</body>

div{
    width: 100px;
    height: 100px;
    background-color: gray;
}

1.2D转换方法

translate()--移动
rotate()--旋转
scale()--缩放
skew()
matrix()

.div2{
    transform:translate(100px,100px);/*向上向下移动100px*/
    -webkit-transform:translate(100px,100px);/*safari chrome*/
    -ms-transform:translate(100px,100px);/*IE*/
    -o-transform:translate(100px,100px);/*opera*/
    -moz-transform:translate(100px,100px);/*firefox*/
}
.div3{
    transform:rotate(180deg);/*旋转180°*/
    -webkit-transform:rotate(180deg);/*safari chrome*/
    -ms-transform:rotate(180deg);/*IE*/
    -o-transform:rotate(180deg);/*opera*/
    -moz-transform:rotate(180deg);/*firefox*/
}
.div4{
    margin-top: 200px;
    transform:scale(1,2);/*宽度1倍，高度2倍*/
    -webkit-transform:scale(1,2);/*safari chrome*/
    -ms-transform:scale(1,2);/*IE*/
    -o-transform:scale(1,2);/*opera*/
    -moz-transform:scale(1,

最低0.47元/天解锁文章

biandous

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
(7)CSS动画-页面特效

一、2D、3D转换通过CSS3转换，我们能够对元素精心移动、缩放、转动、拉长或者拉伸转换是使元素改变形状、尺寸和位置的一种效果，可以使用2D3D转换元素<body> <div>这是一个初始效果</div> <br/> <div class="div2">改变后的效果2</div> <div class="div3">改变后的效果3</div> <div cl
复制链接

扫一扫