第24章 CSS3变形效果[下]

最新推荐文章于 2020-03-26 17:32:16 发布

iteye_17658

最新推荐文章于 2020-03-26 17:32:16 发布

阅读量77

点赞数

分类专栏：阅-H5

阅-H5 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title>CSS3变形效果[下]</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="a">
	<img src="img.png">
</div>
111
</body>
</html>

style.css

@charset "utf-8";

body {
	margin: 100px;
}

#a {
	perspective: 500px;
	/*perspective-origin: top right;*/
	transform-style: preserve-3d;
}

img {
	/*transform: translate3d(100px, 100px, 300px);*/
	/*transform: translateZ(300px);*/

	/*transform: scale3d(1.5,1.5,2.5) rotateX(45deg);*/
	/*transform: scaleZ(1.5) rotateX(45deg);*/

	/*transform: rotate3d(1,1,1,120deg);*/

	/*transform: rotateX(120deg);*/
	/*transform: rotateY(45deg);*/

	/*transform: perspective(500px) rotateY(45deg);*/
	transform: rotateY(45deg);
}

效果图：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

iteye_17658

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第24章 CSS3变形效果[下]

index.html&lt;!DOCTYPE html&gt;&lt;html lang="zh-cn"&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;CSS3变形效果[下]&lt;/title&gt; &lt;link rel="stylesheet&quot
复制链接

扫一扫