CSS3转换功能transform主要属性值分析及实现分享_CSS

CSS3转换功能transform主要属性值分析及实现分享

今天我想介绍一下转换的用法：
transform主要包括以下属性值：
rotate(旋转度数)
scale(缩放)
skew(斜切扭曲)
translate(对象平移)
利用上述属性值，可以实现一些很酷的效果，比如正方体，下面是我做的一个效果，三个大小不等的正方体

代码如下：

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>css3转换功能(www.jb51.net)</title> 
<script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.7.min.js"></script> 
<style type="text/css"> 
* { 
margin: 0; 
padding: 0; 
list-style: none; 
} 
body { 
padding-top: 100px; 
} 
.box { 
margin: 0 auto 0; 
width: 300px; 
height: 500px; 
position: relative; 
} 
.box .topbox { 
position: absolute; 
width: 300px; 
height: 150px; 
border: 1px solid #ccc; 
top: 0; 
left:107px; 
background-color: yellow; 
-moz-transform: skew(-55deg,0); 
-webkit-transform: skew(-55deg,0); 
-o-transform: skew(-55deg,0); 
font-size: 100px; 
text-align: center; 
} 
.box .topbox02{ 
position: absolute; 
width: 300px; 
height: 260px; 
border: 1px solid #ccc; 
border-top: none; 
top: 152px; 
left: 0; 
background-color: green; 
} 
.box .topbox03{ 
position: absolute; 
width: 214px; 
height: 260px; 
border: 1px solid #ccc; 
border-top: none; 
border-left: none; 
top: 76px; 
left: 302px; 
background-color: blue; 
-moz-transform: skew(0,-35deg); 
-webkit-transform: skew(0,-35deg); 
-o-transform: skew(0,-35deg); 
} 
.box .topbox04 { 
position: absolute; 
width: 300px; 
height: 150px; 
border: 1px solid #ccc; 
top: 260px; 
left:107px; 
-moz-transform: skew(-55deg,0); 
-webkit-transform: skew(-55deg,0); 
-o-transform: skew(-55deg,0); 
} 
.box02 { 
-moz-transform: scale(0.5,0.5) translate(455px,-838px); 
-webkit-transform: scale(0.5,0.5) translate(455px,-838px); 
-o-transform: scale(0.5,0.5) translate(455px,-838px); 
} 
.box03 { 
-moz-transform: scale(0.2,0.2) translate(1671px, -4354px); 
-webkit-transform: scale(0.2,0.2) translate(1671px, -4354px); 
-o-transform: scale(0.2,0.2) translate(1671px, -4354px); 
} 
.box .topbox05 { 
position: absolute; 
width: 300px; 
height: 260px; 
border-left: 1px solid #ccc; 
top: 0; 
left:214px; 
} 
</style> 
</head> 
<body> 
<div class="box"> 
<div class="topbox"></div> 
<div class="topbox02"></div> 
<div class="topbox03"></div> 
<div class="topbox04"></div> 
<div class="topbox05"></div> 
</div> 
<div class="box box02"> 
<div class="topbox"></div> 
<div class="topbox02"></div> 
<div class="topbox03"></div> 
<div class="topbox04"></div> 
<div class="topbox05"></div> 
</div> 
<div class="box box03"> 
<div class="topbox"></div> 
<div class="topbox02"></div> 
<div class="topbox03"></div> 
<div class="topbox04"></div> 
<div class="topbox05"></div> 
</div> 
</body> 
</html>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章:

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！

CSS实现子元素div水平垂直居中的示例

div基本布局<div class="main"> <div class="center">... [阅读全文]

详解CSS 子元素相对于父元素固定定位解决方案

基本概念绝对定位(absolute)：设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正... [阅读全文]

纯css实现流向性和动态线条效果的代码

思路：一个外层盒子设置背景；一个内层盒子设置宽高背景，并设置animate让盒子移动demo:css部分：@keyframes mymove { from{l... [阅读全文]

CSS中的translate(-50%,-50%)实现水平垂直居中效果

translate(-50%,-50%) 属性：向上和左，移动自身长宽的 50%，使其居于中心位置。与使用margin实现居中不同的是，margin必须知道自身... [阅读全文]

css实现网页右下角点赞小卡片效果（实例代码）

效果实现html先准备一个干净的 html 页面，写好节点：<!doctype html><html lang="en"&... [阅读全文]

CSS 选择所有子元素添加样式的方法

方法：以实际项目中less为例：.lk-toolbar { .el-input { width: 169px; margin-... [阅读全文]

CSS子元素跟父元素的高度一致的实现方法

绝对定位方法：（1）将父元素设置为相对定位，不写父元素的高度时，会随着左边的子元素高度变化而变化.parent {/*关键代码*/position: relat... [阅读全文]

css子元素相对父元素进行定位的实现

解决方案在父元素中加入position:relative;子元素中加入position:absolute; right:20px;代码html结构<div... [阅读全文]

CSS常用样式之绘制双箭头的示例代码

一、多次调用单箭头实现了单箭头–就很容易实现双箭头了，上文已经介绍2种实现单箭头的原理：边框旋转方式、双三角覆盖方式。这次以边框旋转为例多次调用实... [阅读全文]

CSS中flex和inline-flex的区别详解

inline-flex 和 inline-block 一样，对内部元素来说是个 display:flex 的容器，对外部元素来说是个 inline 的块。两者的... [阅读全文]


验证码：

验证码：

CSS3转换功能transform主要属性值分析及实现分享

2019年07月25日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论