transform案例示意图

已于 2023-02-15 09:37:04 修改
阅读量343 收藏 1
点赞数
分类专栏： 寒假前端 文章标签： css css3 html
于 2020-01-28 22:13:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lbs311709000127/article/details/104103106
版权

效果：

当点击每个蓝色方块的时候后都会有相应的效果。

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}"/>
		<title></title>
		<style type="text/css">
			*, *:after, *:before {
  				box-sizing: border-box;
			}
			h1 {
  				color: #4c4c4c;
 				 font-weight: 600;
  				border-bottom: 1px solid #ccc;
				}

			h2, h4 {
  				font-weight: 400;
  				color: #4d4d4d;
			}
			body{
				background: #F5F3F4;
				text-align: center;
				background: #F5F3F4;
  				margin: 0;
  				padding: 10px;

			}
			.card{
				background: #fff;
				margin: 15px;
				padding: 20px 20px 10px 20px;
				box-shadow: 0 3px 5px #ddd;
				display: inline-block;
				min-width: 200px;
			}
			.box{
				width: 100px;
				height: 100px;
				background: #ddd;
				cursor: pointer;
				margin: auto;
			}
			.fill{
				width: 100px;
				height: 100px;
				background: #03A9F4;
				opacity: .5;
				position: relation;
				box-shadow: 0 0 5px #ccc;
				transition: 0.3s;
			}
			p{
				margin: 20px 0 0;
			}
			.rotate:hover .fill{
				transform: rotate(45deg);
			}
			.rotateX:hover .fill{
				transform: rotateX(45deg);
			}
			.rotateY:hover .fill{
				transform: rotateY(45deg);
			}
			.rotateZ:hover .fill{
				transform: rotateZ(45deg);
			}
			.scale:hover .fill {
 				 -webkit-transform: scale(2);
  				transform: scale(2);
			}

			.scaleX:hover .fill {
  				-webkit-transform: scaleX(2);
  					transform: scaleX(2);
			}

			.scaleY:hover .fill {
  				-webkit-transform: scaleY(2);
  				transform: scaleY(2);
			}

			.skew:hover .fill {
  				-webkit-transform: skew(45deg, 45deg);
  				transform: skew(45deg, 45deg);
			}

			.skewX:hover .fill {
  				-webkit-transform: skewX(45deg);
  				transform: skewX(45deg);
			}

			.skewY:hover .fill {
  				-webkit-transform: skewY(45deg);
  				transform: skewY(45deg);
			}

			.translate:hover .fill {
  				-webkit-transform: translate(45px, 1em);
  				transform: translate(45px, 1em);
			}

			.translateX:hover .fill {
  				-webkit-transform: translateX(45px);
  				transform: translateX(45px);
			}

			.translateY:hover .fill {
 				 -webkit-transform: translateY(45px);
 				 transform: translateY(45px);
			}

			.matrix:hover .fill {
  				-webkit-transform: matrix(2, 2, 0, 2, 45, 0);
  				transform: matrix(2, 2, 0, 2, 45, 0);
			}

			.perspective-100 .box {
  				-webkit-perspective: 100px;
  				perspective: 100px;
			}

			.perspective-200 .box {
  				-webkit-perspective: 200px;
  				perspective: 200px;
			}

			.to-100-0-0 {
  				-webkit-transform-origin: 100% 0 0;
          		transform-origin: 100% 0 0;
			}

			.to-0-100-0 {
  				-webkit-transform-origin: 0 100% 0;
          		transform-origin: 0 100% 0;
			}
		</style>
	</head>
	<body>
		<h1>Css3 Transform</h1>
		<!-- Rotate-->
		<div class="card">
			<div class="box rotate">
				<div class="fill"></div>
			</div>
			<p>roate(45deg)</p>
		</div>
		<div class="card">
			<div class="box rotateX">
				<div class="fill"></div>
			</div>
			<p>roateX(45deg)</p>
		</div>
		<div class="card">
			<div class="box rotateY">
				<div class="fill"></div>
			</div>
			<p>roateY(45deg)</p>
		</div>
		<div class="card">
			<div class="box rotateZ">
				<div class="fill"></div>
			</div>
			<p>roateZ(45deg)</p>
		</div>
		<div class="card">
			<div class="box scale">
				<div class="fill"></div>
			</div>
			<p>scale(2)</p>
		</div>
		<div class="card">
			<div class="box scaleX">
				<div class="fill"></div>
			</div>
			<p>scaleX(2)</p>
		</div>
		<div class="card">
			<div class="box scaleY">
				<div class="fill"></div>
			</div>
			<p>scaleY(2)</p>
		</div>
		<div class="card">
			<div class="box skew">
				<div class="fill"></div>
			</div>
			<p>skew(45deg,45deg)</p>
		</div>
		<div class="card">
  <div class="box skewX">
    <div class="fill"></div>
  </div>
  <p>skewX(45deg)</p>
</div>
<div class="card">
  <div class="box skewY">
    <div class="fill"></div>
  </div>
  <p>skewY(45deg)</p>
</div>
<!-- translate-->
<div class="card">
  <div class="box translate">
    <div class="fill"></div>
  </div>
  <p>translate(45px)  </p>
</div>
<div class="card">
  <div class="box translateX">
    <div class="fill"></div>
  </div>
  <p>translateX(45px)</p>
</div>
<div class="card">
  <div class="box translateY">
    <div class="fill"></div>
  </div>
  <p>translateY(45px)</p>
</div>
<div class="card">
  <div class="box matrix">
    <div class="fill"></div>
  </div>
  <p> matrix(2, 2, 0, 2, 45, 0)</p>
</div>
<h4>Perspective : 100</h4>
<div class="perspective-100">
  <div class="card">
    <div class="box rotateX">
      <div class="fill"></div>
    </div>
    <p>rotateX(90deg)</p>
  </div>
  <div class="card">
    <div class="box rotateY">
      <div class="fill"></div>
    </div>
    <p>rotateY(45deg)</p>
  </div>
</div>
<h4>Perspective : 200</h4>
<div class="perspective-200">
  <div class="card">
    <div class="box rotateX">
      <div class="fill"></div>
    </div>
    <p>rotateX(90deg)</p>
  </div>
  <div class="card">
    <div class="box rotateY">
      <div class="fill"></div>
    </div>
    <p>rotateY(45deg)</p>
  </div>
</div>
<!-- transform origin-->
<h2>Transform origin</h2>
<div class="card">
  <div class="box rotate">
    <div class="fill to-100-0-0"></div>
  </div>
  <p>transform-origin : 100% 0 0  <br/>rotate(45deg)</p>
</div>
<div class="card">
  <div class="box rotate">
    <div class="fill to-0-100-0"></div>
  </div>
  <p>transform-origin : 0 100%  0<br/>rotate(45deg)</p>
</div>
<div class="card perspective-200">
  <div class="box rotateX">
    <div class="fill to-0-100-0"></div>
  </div>
  <p>transform-origin : 0 100%  0<br/>rotateX(45deg)</p>
</div>
<div class="card perspective-200">
  <div class="box rotateX">
    <div class="fill to-100-0-0"></div>
  </div>
  <p>transform-origin : 100% 0 0<br/>rotateX(45deg)</p>
</div>
<div class="card perspective-200">
  <div class="box rotateY">
    <div class="fill to-0-100-0"></div>
  </div>
  <p>transform-origin : 0 100%  0 <br/>rotateY(45deg)</p>
</div>
<div class="card perspective-200">
  <div class="box rotateY">
    <div class="fill to-100-0-0"></div>
  </div>
  <p>transform-origin : 100%  0 0<br/>rotateY(45deg)</p>
</div>
<div class="card">
  <div class="box scale">
    <div class="fill to-100-0-0"></div>
  </div>
  <p>transform-origin : 100%  0 0<br/>scale(2)</p>
</div>
<div class="card">
  <div class="box scale">
    <div class="fill to-0-100-0"></div>
  </div>
  <p>transform-origin : 0 100%  0<br/>scale(2)</p>
</div>
<div class="card">
  <div class="box scaleX">
    <div class="fill to-100-0-0"></div>
  </div>
  <p>transform-origin : 100%  0 0<br/>scaleX(2)</p>
</div>
<div class="card">
  <div class="box scaleX">
    <div class="fill to-0-100-0"></div>
  </div>
  <p>transform-origin : 0 100%  0<br/>scaleX(2)</p>
</div>
<div class="card">
  <div class="box scaleY">
    <div class="fill to-100-0-0"></div>
  </div>
  <p>transform-origin : 100%  0 0<br/>scaleY(2)</p>
</div>
<div class="card">
  <div class="box scaleY">
    <div class="fill to-0-100-0"></div>
  </div>
  <p>transform-origin : 0 100%  0<br/>scaleY(2)</p>
</div>
	</body>
</html>

小青龙8085
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Transform结构详解 + 手撕版本
qq_43446879的博客
05-15 5825
Transform 下图是Transform 的整体架构，由decoder和encoder构成，下面分部分对Transform的结构进行分析 (下图来自于论文Attention is all you need)。 (论文链接https://arxiv.org/pdf/2102.10772.pdf) 1.Encoder Encoder 主要是用来对句子的输入进行编码，下面用 ”我爱学习“ 这句话为例子解析编码过程。 首先是以词向量的形式进行输入，并且这里的词向量加入了positional encodin
Transformer详解，中文版架构图
人工智能曾小健
06-15 8957
2.2.1 “编码器-解码器”架构Seq2Seq 思想就是将网络的输入输出分别看作不同的序列，然后实现序列到序列的映射，其经典实现结构就是“编码器-解码器”框架。编码器-解码器框架如图 2.7 所示。图2.7 编码器-解码器的基本框架在 Seq2Seq 思想应用于自然语言处理之初，编码器解码器主要使用的是 RNN 及其变体。针对输入，编码器会先遍历输入序列，根据循环神经网络的特性，每一层的输入都包含了当前层的输入和前一层的隐藏状态，而。
前端开发_HTML5_CSS部分-转化(transform)
u013185175的博客
12-19 1959
转化(transform) 1.引入 我们在之前的学习中学习了两个特效:过渡和动画，下面我们一起来学习一个新的效果转化，转化的效果主要是在二维(2D)和三维(3D)的坐标上就行的一系列的操作，下面我们一起来学习一下。 2.转化(transform) (1)、转化概述:CSS 转换（transforms）允许您移动、旋转、缩放和倾斜元素。 (2)、分类:转化我们可以分为四类:移动(translate)、旋转(rotate)、缩放(scale)和倾斜(skew)。下面我们分别来学习一下。...
隐藏-显示——scale(0)到scale(1)
wangjiali123123的博客
03-31 3512
transform:scaleY(0); transform-origin: bottom; transition: all .3s; ///////////////////////// tranform:scaleY(1); 这样就能实现类似下拉展开，隐藏显示。。
html 图片使用scale,缩放：scale() - CSS3 | 绿叶学习网
weixin_35975177的博客
06-09 1172
在CSS3中，我们可以使用transform属性的scale()方法来实现元素的缩放效果。缩放，指的是“缩小”和“放大”的意思。语法：transform: scaleX(x); /*沿X轴方向缩放*/transform: scaleY(y); /*沿Y轴方向缩放*/transform: scale(x, y); /*沿X轴和Y轴同时缩放*/说明：跟tr...
transform_图像增强_
09-30
Log变换图像增强，指数变换图像增强、阈值图像增强、直方图均衡
iOS图片放大的方式（transform和frame)
09-02
主要介绍了iOS图片放大的两种方式，transform方式放大图片,从中心开始放大，另一种用frame改变宽高，详细内容请参考下
ImageTransform.rar_图像 传输
07-14
本程序实现基于vc++的静态图像点对点传输，通过建立Internet连接进行传输，是深入研究QQ等即时通信软件的极好参考
div css3 transform旋转变形属性制作新浪微博图片抖动
11-24
div css3 transform旋转变形属性制作新浪微博图片抖动
map-transform:地图转换
04-07
地图经纬度转换 地图经纬度转换是因为一直在从事地图方面的工作。有时候就会为了校验上报的位置点是否正确去反复检查。 而且校验相对比较麻烦, 一方面是涉及到不同坐标系之间的转换、二是需要到不同的地图供应商再去...
CSS3变形transform
qq_68516236的博客
04-07 637
2D移位: transform（x,y）; transform：translate（10px,20px）;元素移位至x轴10像素，y轴20像素的坐标位置； transform:translate（0,10px）;元素移位至y轴10像素的坐标位置，x轴不变； transform:translateX（10px）；元素移位至x轴10像素的坐标位置； transform:translateY（10px）；元素移位至y轴10像素的坐标位置； 注意！！X值可以为负值，会向左边移位； 2D倾斜.
html变形(包含旋转和斜切,transform旋转，平移，缩放，扭曲 斜切
weixin_42509815的博客
06-29 2482
transform 改变rotate 旋转translate 位移scale 缩放skew 斜切变形记得兼容性：-webkit--moz--ms--o-transform: rotate(Xdeg,Ydeg);deg 表示角度 X轴正半轴为0deg，顺时针旋转值越来越大。transform-origin( X ,Y ); 设置对象旋转的中心点，如果没设置该值，默认transform-orig...
transform的使用以及实战案例
qq_42000660的博客
07-18 1547
一、transform介绍 1、位移 translate transform: translateX(30px) / translateY(30px) / translateZ(30px) 分别代表元素在水平方向/竖直方向/垂直屏幕的方向移动的位置大小 特点 其和position：relative一样，元素相对于自己改变位置，不会脱离文档流，translate位移时，默认原点时元素的中心位置 2、放大与缩小scale transform: scale(n)当n大于1时则为放大原来的n倍，当n小
css3—transform
记录点滴
09-15 583
tranform英文意思是：改变，使··· 变形； transform有四个属性分别来看下： 1、旋转 transform：rotate（xxxdeg）；使元素旋转多少度，正数为顺时针旋转多少度；负数为逆时针旋转多少度。 实际案例： 鼠标hover，小三角旋转360° <style> .box{ position: relative; width:1...
如何转换高度：0; 达到高度：自动； 使用CSS？
asdfgh0077的博客
12-24 1736
我正在尝试使用CSS过渡使<ul>滑落。 <ul>从height: 0; 。 悬停时，将高度设置为height:auto; 。 但是，这导致它只是显示而不是过
Transform详解
热门推荐
霜叶的博客
08-18 10万+
1、Transform简介 Transformer中抛弃了传统的CNN和RNN，整个网络结构完全是由Attention机制组成。更准确地讲，Transformer由且仅由self-Attenion和Feed Forward Neural Network组成。一个基于Transformer的可训练的神经网络可以通过堆叠Transformer的形式进行搭建，作者的实验是通过搭建编码器和解码器各6层，总共12层的Encoder-Decoder，并在机器翻译中取得了BLEU值得新高。 2、Transform结构
transform
weixin_46376652的博客
03-21 1309
transform:translate transform 平移、倾斜、缩放、旋转 perspective transform-origin transform:scale transform:rotate
如何用CSS实现2D与3D的转换效果（transform）
NOyesNONO_的博客
12-17 438
css的兼容性问题 w3c成员：各大互联网巨头相关 它设定了整个平台的规则，监督整个过程。 css3要考虑兼容性问题。 浏览器前缀 ： 谷歌 苹果 -webkit- 火狐 -moz- IE -ms- 欧朋 -o- 谷歌 苹果 -webkit- 火狐 -moz- IE -ms- 欧朋 -o- 2D过渡方式（transition-后缀） transition 过渡 之前：元素从一个状态到另外一个状态（hover）直接切换，从开始状态到结束状态瞬间完成，中间过程几乎不可见。 c
transform案例以及深入了解transition
yyanglirong的博客
04-15 221
今天在工作中涉及到一个抽奖的小案例，话不多说，先把简单的效果给大家看一下~ 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示； 增加了 图片拖拽 功能，你可以将...
transform放大缩小图片
最新发布
09-16
可以使用 CSS 的 transform 属性来放大缩小图片。transform 属性可以通过 scale 函数来控制元素的缩放比例。 下面是一个示例代码，可以通过鼠标滚轮来放大缩小图片： ```html <!DOCTYPE html> img { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值