transform的形变

最新推荐文章于 2022-10-19 20:17:27 发布

kybkq111

最新推荐文章于 2022-10-19 20:17:27 发布

阅读量268

点赞数

分类专栏：基础

本文链接：https://blog.csdn.net/kybkq1314/article/details/78427809

版权

基础专栏收录该内容

50 篇文章 0 订阅

订阅专栏

// display:inline-block;转换块级元素 // opacity: 1;透明度 //transition:1s;动画执行时间

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="xingbian.css" rel="stylesheet"/>
</head>

<body>

<div id="one">
旋转
</div>

<div id="two">
移动
</div>

<div id="three">
缩放
</div>

<div id="fore">
扭曲
</div>

<div class="five">
阴影
</div>

</body>

</html>

CSS代码

@charset "utf-8";
/* CSS Document */

#one{ width:200px;
height:200px;
margin-top:50px; margin-left:60px;
background:hsla(233,76%,46%,1.00);
transform:rotate(50deg)}

#two{ width:200px; float:left;
margin-top:50px;
margin-left:400px;
height:200px;
background:hsla(233,76%,46%,1.00);
border:1px solid blue;
transform:translate(100px,20px);}

#three{ width:200px; float:right;
margin-top:100px;

height:200px;
background:hsla(233,76%,46%,1.00);
transform:scale(1,1.5);}

#fore{ width:200px;
margin-top:100px;
margin-left:60px;
height:200px;
background:hsla(233,76%,46%,1.00);
transform:skew(30deg,10deg);
transform-origin:100% 50%;}

.five{ width:100px; height:100px; background:hsla(359,87%,51%,1.00); box-shadow: 10px 10px 10px hsla(174,81%,50%,1.00);
border-radius:50%; text-shadow:10px 10px 10px hsla(174,81%,50%,1.00)}